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'" + ":" + "'" + "图片上传发生错误,请重试!" + "'");
}
}