IE9图片上传预览

方法:因为IE9浏览器无法获取file属性,所以使用from提交方式进行图片上传,再用返回的图片路径进行预览。

1、dom结构
//这个input的作用是:如果需要给上传的图片绑定用户id,在上传图片时要传入用户id到后台
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的返回值是"
f98c72491b6e4d299c41e3ed58bc5f26
",被"
"标签包裹的,需要处理一下
              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('提示','图片获取失败!');
           }
       }
   })
}

你可能感兴趣的:(IE9图片上传预览)