1、页面元素:
<tr>
<td align="left">
<input type="file" id="picFile" name="picFile" disabled="disabled"/>
</td>
</tr>
<!-- 图片显示区域 -->
<tr>
<td colspan="4" align="center">
<div style="width:98%; height:254px;">
<input type="hidden" id="imageVal" name="imageVal" value=""/>
<img id="imagePre" width="100%" height="100%"/>
</div>
</td>
</tr>
2、js相关代码:
//绑定上传控件 将本地图片转成base64 显示在页面
$("#picFile").change(function(){
//验证是否图片
if(!/image\/\w+/.test(this.files[0].type)){
alert("文件必须是图片格式!");
return false;
}
//限制图片大小
var size = this.files[0].size / 1024;
if(size>1000){
alert("图片大小不能大于1M!");
return false;
}
//var v = $(this).val();
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e){
console.log(e.target.result);
$("#imageVal").val(""); //清空base46
$("#imagePre").attr("src", ""); //清空图片
$("#imageVal").val(e.target.result.split(",")[1]);
$("#imagePre").attr("src", e.target.result); //将Base64流显示在页面的 img标签中进行浏览
};
});