ie9下实现图片上传

1 先引进两个js:jquery-1.7.1.min.js和ajaxfileupload.js

      jquery在1.9版本以下,ajaxfileupload为插件

2 修改ajaxfileupload里的代码:

     把代码

if(window.ActiveXObject) {  
    var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
     if(typeof uri== 'boolean'){  
         io.src = 'javascript:false';  
     }  
     else if(typeof uri== 'string'){  
         io.src = uri;  
     }  
 }  

修改成
if(window.ActiveXObject) {  
   if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){  
        var io = document.createElement('iframe');  
        io.id = frameId;  
        io.name = frameId;  
    }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){  
        var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
        if(typeof uri== 'boolean'){  
            io.src = 'javascript:false';  
        }  
        else if(typeof uri== 'string'){  
            io.src = uri;  
        }  
    }  

3 html代码 

 <li class="clearFix upLoadPic" id="upLoadPic">
            <label  class="fl">上传图片:</label>
            <input id="uploadLocalPic" type="file"  class="fl" onchange="previewPic()"     
              name= "multipartfile"/>
</li>
 <li class="clearFix button">
            <a href="javascript:;" class="confirm" id="confirm">确认</a>
            <a href="javascript:;" class="cancel" id="cancel">取消</a>
 </li>

4 js代码

$("#confirm").click(function(){
            var file = document.getElementById("uploadLocalPic");
            var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
            if(ext!='bmp'){
                top.artDialog.alert("图片的格式必须为bmp格式!");
                return;
            }
            var isIE = navigator.userAgent.match(/MSIE/)!= null;
            if(isIE) {   //ie9 上传图片
                var url= "test.do";
                $.ajaxFileUpload({
                    type: "POST",
                    url: url,    //路径
//                  data:dataParam,  //参数
                    secureuri : false,//是否启用安全提交,默认为false
                    fileElementId:'uploadLocalPic',//文件选择框的id属性
                    dataType: 'json',//服务器返回的格式
                    async : false,
                    success: function(data){
                        var isSuccess=data.success;
                        if(!isSuccess){
                            top.artDialog.alert('上传图片失败');
                            return;
                        } 
                    },
                  
                });
            }else { //ie11,谷歌  上传图片
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                //监听文件读取结束后事件
                reader.onloadend = function (e) {
                    var img=e.target.result;
                    var url= "test.do";
                    var param= {content:img};
                    $.ajax({
                            url: url,
                            async:false,
                            data: param,
                            type: "Post",
                            dataType: "json",
                            success: function (data) {
                                var isSuccess=data.success;
                                if(!isSuccess){
                                    top.artDialog.alert('上传图片失败');
                                    return;
                                }
                            },
                    })
                }
            }

    });

5 java代码

/**
     * 保存图片
     * @param request
     * @param response
     */
    @RequestMapping(value = "/test")
    public void test(@RequestParam MultipartFile multipartfile,HttpServletRequest request, HttpServletResponse response) {
        File file=null;
        try{
            // 获取文件名
            String fileName = multipartfile.getOriginalFilename();
             // 获取文件名称
            String prefix=fileName.substring(0,fileName.indexOf("."));
            // 获取文件后缀
            String suffix=fileName.substring(fileName.lastIndexOf("."));     
            file = File.createTempFile(prefix, suffix);
            // MultipartFile to File            
            multipartfile.transferTo(file); 
            
            //然后,可以操作你业务上的要求
        }catch (Exception e){
            CommonUtil.log(e.getMessage());
        }

    }

6 上传需要注意的事项:

        1 html中上传文件input标签里的name属性名字要和java参数MultipartFile变量一致

        2 jquery的版本不要过高

        3 top.artDialog.alert可以用alert来替换

        4 $.ajaxfileupload中的参数fileElementId对应的是HTML上传文件input的id

原文地址:https://www.cnblogs.com/t0404/p/10290946.html