解决方案: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>