ajax上传文件 jqueryFileUpload

这里讨论的是jqueryFileUpload，在IE9往上（包括IE9）下，都是正常上传的，但是在IE8下，上传不了，根本就没进后台，当然也进不到done方法里面去。但是官方(http://www.jq22.com/jquery-info230/)文档上说IE76/7/8/9/10/11都支持，到底IE8下怎么回事，楼主也没弄清楚，待有时间好好探索一下...

简略图：

点击“添加附件”后，选中文件，自动上传，再把路径回填的附件文本域内：

Here is the html：

<script src="js/jquery-ui/jquery-1.11.2.min.js"></script>

<script src="jquery.ui.widget.js"></script>

<script src="js/jquery.iframe-transport.js"></script>

<script src="js/jquery.fileupload.js"></script>

<link rel="stylesheet" href="css/jquery.fileupload-ui.css">

<div class="login_field" style=" height:100%;">

<label class="control-label" for="reason">

<a href="javascript:addAppendex();">添加附件</a><br>

</label>

<div style="float:left; padding-left:2%;">

<span id="info"></span><span id="img"></span>

</div>

<div style=" float:right; width:86%;">

<textarea id="annexName" class="form-control" rows="3" style="width:100%; height:70px;"

placeholder="请选择文件" readonly="readonly" ></textarea>

</div>

</div>

Here is the javascript:

$(function(){

$('#uploadFile').fileupload({});

});

function addAppendex(){

$('#uploadFile').click();

$("#info").text("");

$("#info").css("color","green");

$("#img").html("");

}

function ajaxFileUpload(){

//选择文件的路径

var content = document.getElementById("annexName").value;

var orgImage = document.getElementById("uploadFile").value;

$('#uploadFile').fileupload({

url : '${pageContext.request.contextPath}/transportFile/uploadFile',

add: function (e, data) {

$("#img").html("<img src='${pageContext.request.contextPath}/static/images/image/load_075.gif'>");

data.context = $('<p/>').text('').appendTo(document.body);

data.submit();

},

done : function(e, result) {

if (result.textStatus == 'success') {

$("#info").text("上传成功");

$("#info").css("color","green");

$("#img").html("<img src='images/icon/ico-success.png'>");

if(content == ""){

document.getElementById("annexName").value = orgImage;

}else{

document.getElementById("annexName").value = document.getElementById("annexName")

.value + ";\n" + orgImage;

}

} else {

$("#info").text("上传失败");

$("#info").css("color","red");

$("#img").html("<img src='images/icon/ico-error.png'>");

}

}

});

}

java后台：

@RequestMapping(value="/uploadFile",method = RequestMethod.POST)

@ResponseBody

public String uploadFile(@RequestParam MultipartFile uploadFile,HttpServletRequest request) throws Exception {

if(uploadFile != null && !uploadFile.isEmpty()){

//根据源文件名称 获取源文件名称 和后缀

String origfilename = uploadFile.getOriginalFilename(); //abc.doc

String ext = origfilename.substring(origfilename.lastIndexOf("."));//.doc

String filenameNotExt = origfilename.substring(0, origfilename.lastIndexOf("."));//abc

//如果是图片类型 不需要swf转换 否则需要转换

String newfilename = filenameNotExt + ext;//abc.doc

//文件存放路径，上传文件

String realPath = request.getSession().getServletContext().getRealPath("/WEB-INF" + savePath);

FileUtils.copyInputStreamToFile(uploadFile.getInputStream(), new File(realPath, newfilename));

return "success";

}else{

return "fail";

}

}