方法:因為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、選擇圖片執(zhí)行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('提示','圖片獲取失敗!');
}
}
})
}