• 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

  • 相关阅读:
    Sql Server 2012 数据库同步方式 (发布、订阅)
    博客搬家通知
    无聊而又劳累的一天
    有没有大神知道国产加密算法SM2的详细介绍
    Android开发环境搭建helloworld程序创建(新手)
    debian下安装东西,遇到两个东西,记录下
    算法:扑克牌相关的一个简单功能示意(纯C实现)
    [51单片机学习笔记FIVE]----独立按键
    [51单片机学习笔记FOUR]----16*16LED点阵
    [51单片机学习笔记THREE]----继电器
  • 原文地址:https://www.cnblogs.com/t0404/p/10290946.html
Copyright © 2020-2023  润新知