搜索
您的当前位置:首页正文

Jquery图片转成base64

来源:二三娱乐

可以实现图片预览上传,不用flash方法

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width" />  
<title>jquery 图片base64</title>  
<script 
</head>  
<body>  
<div id="testPhone" class="weui_uploader_input_wrp" style="width:79px; height:79px;"> </div>  
<input id="testFile" type="file">  
<hr>  
<img id="testImg" style="max-height: 300px; height: 8em; min-width:8em;">  
<hr>  
<textarea id="testArea" style="display: block; width: 100%;height: 30em;"></textarea>  
<input id="btnTest" type="button" value="提交base" />  
<script>  
    $("#testPhone").click(function () {  
        $("#testFile").click();  
    });  

    $("#testFile").change(function () {  
        run(this, function (data) {  
            $('#testImg').attr('src', data);  
            $('#testArea').val(data);  
        });  
    });  

    $("#btnTest").click(function () {  
        $.ajax({  
            url: "upload.php",  
            type: "post",  
            dataType: "json",  
            data: {  
                "content": $("#testArea").val(),  
            },  
            async: false,  
            success: function (result) {  
                if (result.Code == 200) {  
                    alert(result.Data);  
                } else {  
                }  
            }  
        });  
    });  

    function run(input_file, get_data) {  
        /*input_file:文件按钮对象*/  
        /*get_data: 转换成功后执行的方法*/  
        if (typeof (FileReader) === 'undefined') {  
            alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");  
        } else {  
            try {  
                /*图片转Base64 核心代码*/  
                var file = input_file.files[0];  
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
                if (!/image\/\w+/.test(file.type)) {  
                    alert("请确保文件为图像类型");  
                    return false;  
                }  
                var reader = new FileReader();  
                reader.onload = function () {  
                    get_data(this.result);  
                }  
                reader.readAsDataURL(file);  
            } catch (e) {  
                alert('图片转Base64出错啦!' + e.toString())  
            }  
        }  
    }  
</script>  
</body>  
</html>  

php接收保存图片方法

$base64 = $_REQUEST['content'];
$base64 = explode(',', $base64);  // 头部的代码  data:image/jpeg;base64,  需要去掉
$img = base64_decode($base64[1]);
$a1 = file_put_contents('./upload/pic_name.jpg', $img);//返回的是字节数
Top