<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="fileimg" />
<img src="" id="viewimg" />
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
//file选项改变时
$("#fileimg").change(function() {
//把选择的图片显示到img上
var fileObj = $(this)[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#viewimg");
if(fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);//要显示图片的路径
$img.attr("src", dataURL);//显示图片
//图片转换成base64
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);//这一步是关键
reader.onload = function (e){
var base64=e.target.result;//这一步是关键
alert(base64);
$.ajax({
type:"post",
url:"......",
data:{base64:base64},//base64:e.target.result
async:true,
dataType:"json"
});
}
}
})
</script>