Question

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

后台SpringMVC 接受请求如下
@RequestMapping(value = "/fileupload", method = RequestMethod.POST)
public @ResponseBody
HBaseFileInfo upload(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value = "fileSetKey", required = true) String fileSetKey) throws IOException {
前台
$('#fileupload').fileupload({
url: url,
autoUpload: true,
dataType: 'json',
formData: {fileSetKey:$("#pickey").val()},
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/,
done: function (e, data) {
$.each(data.files, function (index, file) {
$("#newfiles").append(file.preview);
});
$('#progress .bar').css('width','0%');
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});

谷歌没问题，IE8中愣是传不到后台，求高手
progressall
和done 都进不去。。我屮艸芔茻

Answer 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('<ul class="inline"  id="oldlist"></ul>');
        $.getJSON("/base/product/filelist/"+fileKey+".do",function(data) {
            $.each(data,function(index, fileKey) {
  
              $('#oldlist').append('<li><img  class="del_pic" 
title="双击删除图片" val="'+fileKey.S+'" 
src="/base/product/getfile/'+fileKey.S+'.do" ></li>'); 
            });
        });
    };
    
    // 获得浏览器类型
    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('<ul class="inline"  id="newlist"></ul>');
                
                // 旧图片清空
                $('#oldFileDiv').empty();
            } else if(attrs.optType == "update"){
                // 初始化fileKey
                fileKey = attrs.fileKey;
                
                $('#previewDiv').empty().append('<ul class="inline"  id="newlist"></ul>');
                
                // 旧图片初始化
                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('<li><img 
class="del_pic" title="双击删除图片" src="/base/product/getfile/' + 
data.fileKeyList[0]+ '.do" ></li>');

                        // 清除路径
                        $("#file-info-table").hide();
                    } catch (e) {
                        $('#uploadstatus').html('上传失败！：'+e);
                    }
                    $('#uploadstatus').html("");
                    $('#file-upload-btn').attr("disabled", false); 
                },
                error : function(jqXHR, textStatus,errorThrown) {
                    $('#uploadstatus').html("<span  class=' error'>上传失败，请重试！</span>");
                    $('#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'" + ":" + "'" + "图片上传发生错误，请重试！" + "'");
        }
    }

Answer 2

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

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

追问

我写成 add: function (e, data) {
alert("add");}, done: function (e, data) {
alert("done"); }, progressall: function (e, data) {
alert("progressall"); } });
都不行