返回列表

微信下无法上传图片的问题

默认分类 2014/11/20 08:26

解决方案:data:image/jpg;base64编码并用ajax的方式传输到服务端
具体实现:用html5的file api里的readAsDataURL函数把文件转化成base64编码
测试代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
    var input = document.getElementById("demo_input");
    var result= document.getElementById("result");
    var img_area = document.getElementById("img_area");
    if ( typeof(FileReader) === "undefined" ){
        result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
        input.setAttribute( "disabled","disabled" );
    } 
    else {
        input.addEventListener( "change", readFile, false );
    }
};
function readFile(){
    var file = this.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        document.getElementById("img2").src = reader.result;
    }
}
</script>
</head>
<body>
<input type="file" value="sdgsdg" id="demo_input" />
<textarea id="result"></textarea>
<button onclick="alert(document.getElementById(\'img2\').src)">
ss</button><img id="img2" />
</body>
</html>