IE9图片上传预览

方法:因为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('提示','图片获取失败!');
           }
       }
   })
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容