方法:因为IE9浏览器无法获取file属性,所以使用from提交方式进行图片上传,再用返回的图片路径进行预览。
1、dom结构
<div class="file_box">
<form id="form_file" method='post' enctype="multipart/form-data">
<input name="region" type="text" style="display: none"/>//这个input的作用是:如果需要给上传的图片绑定用户id,在上传图片时要传入用户id到后台
<input class="easyui-filebox item_file" name="file" data-options="buttonText:'上传图片',
accept:'image/jpeg',onChange:submit_file" />
</form>
</div>
2、选择图片执行onChange事件
form提交用jq插件jquery-form.js来提交可以拿到返回值,然后再进行图片预览
function submit_file() {
$("#form_file input[name='region']").val(id);//这个id就是上面要绑定的用户id
var options = {
url:"上传图片接口",
type:'post',
success:function(data){
//data的返回值是"<pre>f98c72491b6e4d299c41e3ed58bc5f26</pre>",被"<pre></pre>"标签包裹的,需要处理一下
var ieData = data.slice(5, -6);
//拿到图片返回值以后加载显示图片
loadimg($('.preview'),ieData);//$('.preview')是要显示的img标签
}
};
//插件jquery-form.js提交
$("#form_file").ajaxSubmit(options);
}
3、预览图片
//加载图片
function loadimg(dom,id){
$.ajax({
url:"下载图片路径",
type:'get',
contentType: 'application/json;charset=UTF-8',
data:{id:id},
success:function(data){
if(data){
dom.attr('src',"data:image/jpeg;base64," + data);
}else{
$.messager.alert('提示','图片获取失败!');
}
}
})
}