IE 8中jquery file upload 上传图片没反应

2025-01-09 09:44:31
推荐回答(2个)
回答1:

jquery file upload对IE的支持不是很好,所以很多方法不支持,例如progressall
什么的,所以你得JS可能不正确,之前我写了一个文件上传的,可参考

define(function(require, exports, module) {
    var $ = require("$");
    require("jquery.validate");
    require("bootstrap_commonrequire");
    require("jquery-form");

    var bootbox = require('bootbox');
    var Widget = require("widget");
    var template = require("./ImgUpload.tpl");
    var fileKey = null;
    
    $(document).ready(function() {
        // 图片删除事件
        $('.del_pic').off().live("dblclick",function(){
            var ele = $(this);
            var key = $(this).attr("val");
            bootbox.confirm('确定删除?',function(YesOrNo){
                if(YesOrNo){
                    var url = "/base/product/filedel/"+key+".do";
                    $.ajax({
                        type : "GET",
                        url : url,
                        async:false,
                        data:{},
                        success : function(d) {
                            bootbox.alertTimeout('删除成功!');
                            ele.parent().remove();
                        },
                        error : function(data) {
                            bootbox.alertTimeout('删除出错!');
                        }
                    });
                }
            });
        });
    });
    
    // 初始化老照片
    function initOldImgList(){
        
        $('#oldFileDiv').empty().append('');
        $.getJSON("/base/product/filelist/"+fileKey+".do",function(data) {
            $.each(data,function(index, fileKey) {
  
              $('#oldlist').append('
  • title="双击删除图片" val="'+fileKey.S+'" 
    src="/base/product/getfile/'+fileKey.S+'.do" >
  • '); 
                });
            });
        };
        
        // 获得浏览器类型
        function getBrowserType() {  
           if(navigator.userAgent.indexOf("MSIE")>0) {  
                return "MSIE";  
           }  
           if(navigator.userAgent.indexOf("Firefox")>0){  
                return "Firefox";  
           }  
           if(navigator.userAgent.indexOf("Chrome")>0) {  
                return "Chrome";  
           }   
           if(navigator.userAgent.indexOf("Camino")>0){  
                return "Camino";  
           }  
           if(navigator.userAgent.indexOf("Gecko/")>0){  
                return "Gecko";  
           }  
        }  
        
        // 文件类型
        function checkFileType(fileName){
            if(typeof(fileName) == "undefined" || fileName == null || fileName == ""){ 
                 bootbox.alertTimeout("请选择图片!");
                 return false;
            } 
            if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName))
            {
                bootbox.alertTimeout("图片类型必须是.gif,jpeg,jpg,png中的一种!");
                return false;
            }
            return true;
        }
        
        var FileUpLoadComponent = Widget.extend({
            template : template,
            setFileKey : function(fileKeyValue){
                fileKey = fileKeyValue;
            },
            afterRender : function() {
                // 输入项初始化
                var attrs = this.get("attrs");
                
                if(attrs.optType == "create"){
                    // 初始化fileKey
                    fileKey = attrs.fileKey;
                    
                    $('#previewDiv').empty().append('');
                    
                    // 旧图片清空
                    $('#oldFileDiv').empty();
                } else if(attrs.optType == "update"){
                    // 初始化fileKey
                    fileKey = attrs.fileKey;
                    
                    $('#previewDiv').empty().append('');
                    
                    // 旧图片初始化
                    initOldImgList();
                }

                // 显示文件名称
                var slectFileElem = document.getElementById('img-itemPic');  
                slectFileElem.onchange = function(){
                    try{
                        var fileName = null;
                        var bruserType = getBrowserType();
                        if(bruserType == "Firefox" || bruserType == "Chrome"){
                            var selectedFiles = slectFileElem.files;
                            if(selectedFiles == null || selectedFiles.length == 0)
                                return;
                            
                            var singleFile = selectedFiles[0];
                            fileName = singleFile.name;
                        } else if(bruserType == "MSIE"){
                            var filePath = slectFileElem.value;  
                            if(filePath){
                                var point = filePath.lastIndexOf('\\');  
                                fileName = filePath.substring(point+1); 
                            }
                        } 
                        
                        if(!checkFileType(fileName)){
                            return;
                        }
                        
                        $("#file-info-table").show();
                        $('.file-name').text(fileName);
                    } catch(ex){
                        bootbox.alertTimeout('获取文件信息出错!');
                    }
                };
                
                // 图片上传
                $('#imgUploadForm').ajaxForm({
                    url : "/base/product/fileupload2.do",
                    type : "POST",
                    data : {
                        fileSetKey : fileKey
                    },
                    beforeSubmit : function(a, f, o) {
                        $('#uploadstatus').html('上传中...');
                        $('#file-upload-btn').attr("disabled", true); 
                    },
                    success : function(data) {
                        try {
                            data = JSON.parse(data); // 将JSON字符串解析为JSON对象
                            if (typeof (data) == 'string')
                                data = eval('(' + data + ')');

                            $('#uploadstatus').html('上传成功!');
      
                          $("#newlist").append('
  • class="del_pic" title="双击删除图片" src="/base/product/getfile/' + 
    data.fileKeyList[0]+ '.do" >
  • ');

                            // 清除路径
                            $("#file-info-table").hide();
                        } catch (e) {
                            $('#uploadstatus').html('上传失败!:'+e);
                        }
                        $('#uploadstatus').html("");
                        $('#file-upload-btn').attr("disabled", false); 
                    },
                    error : function(jqXHR, textStatus,errorThrown) {
                        $('#uploadstatus').html("上传失败,请重试!");
                        $('#file-upload-btn').attr("disabled", false);
                    }
                });
            }
        });

        module.exports = FileUpLoadComponent;
    });


    后台的

        @RequestMapping(value = "/fileupload2", method = RequestMethod.POST)
        public void upload2(HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "fileSetKey", required = true) String fileSetKey) throws IOException {
            MultipartHttpServletRequest multiHttpServletRequest = (MultipartHttpServletRequest) request;
            
            HBaseFileInfo hBaseInfo = new BaseFileOper("prodpic").filesUpload(multiHttpServletRequest, fileSetKey, new String[] { "B", "M", "S" }); // 固定值:
            
            response.setCharacterEncoding("UTF-8");  
            response.setContentType("text/html");  
            try {
                JSONObject object = JSONObject.fromObject(hBaseInfo);
                response.getWriter().write(object.toString());
            } catch (IOException e) {
                response.getWriter().write("'msg'" + ":" + "'" + e.getLocalizedMessage() + "'");
            } catch (Exception e) {
                response.getWriter().write("'msg'" + ":" + "'" + "图片上传发生错误,请重试!" + "'");
            }
        }

    回答2:

    formData: {fileSetKey:$("#pickey").val()},---这句有点奇怪,你把data alert出来呢

    还有启动F11,启动ie8的调试平台,ie8确实恶心。