美文网首页
IE9图片上传预览

IE9图片上传预览

作者: 心灵最深处 | 来源:发表于2019-08-29 15:46 被阅读0次

方法:因为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('提示','图片获取失败!');
           }
       }
   })
}

相关文章

网友评论

      本文标题:IE9图片上传预览

      本文链接:https://www.haomeiwen.com/subject/lztiectx.html