關於文件上傳的插件網上有太多了。但是呢，做的特別好的，特別漂亮的上傳插件對於IE低版本的兼容性不好，甚至有的不支持。這裏我先說說jquery-file-upload這款插件，兼容性好。至於其他的上傳插件，例如uploadify、swfupload、dropzone等，後期我會抽出時間，將我在項目中使用心得都寫出來。共同學習，有不足之處歡迎指正。
示例圖：
1.首先是下載資源
（github上面寫的demo太亂，新手即使下載下來，也不知道如何跑的起來，這就是我寫這篇博文的原因。希望寫一個很簡單的實例，讓新手快速的掌握。但是我們所需的資源也可以從demo上下載，取我們需要的即可）
我自己整理的資源地址：
http://download.csdn.net/detail/itworktt/9617821
git下載地址：
https://github.com/blueimp/jQuery-File-Upload/
需要用到的下載資源清單：
js：
jquery-3.0.0.min.js：最好是最新版本
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
css：
jquery.fileupload.css
jquery.fileupload-ui.css
2.編寫實例
前臺頁面jsp：
<%--
Created by IntelliJ IDEA.
User: zz
Date: 2016/8/31
Time: 9:02
To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery file upload</title>
<script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery-3.0.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.ui.widget.js"></script>
<script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.iframe-transport.js"></script>
<script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.fileupload.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload-ui.css">
<style>
.btn-success{display:inline-block; padding:0 0px;height:36px;background:#e7f1ff 6px center no-repeat;border-radius:5px;border:1px solid #89aede; line-height:35px;color:#3b83e1; font-weight:bold; cursor:pointer;text-align:center; min-width:100px; }
.btn-success:hover{ background-color:#dbeafe;}
.btn_blue{background-color: #E7F1FF;}
.btn_blue:hover{ background-color: #89aede;}
#center { padding-top: 100px }
</style>
</head>
<body>
<div id="center" align="center">
<%--<input id="fileId" type="file" name="file" data-url="${pageContext.request.contextPath}/uploadfile" multiple>--%>
<%--<p></p>--%>
<span class="btn btn-success fileinput-button">
<span>選擇文件</span>
<input id="fileId" type="file" name="file" multiple>
</span>
<div id="files" class="btn_blue" style="width: 400px;height: 200px;"></div>
</div>
</body>
<script>
(function(){
$('#fileId').fileupload({
url: '${pageContext.request.contextPath}/uploadfile',
done: function (e, data) {
alert('I love my girl friend-JOAN');
$('#files').append(data.result.name+'<br>');
},
fail: function () {
alert('出錯');
}
});
})();
</script>
</html>3.後臺接收
我這裏用的是springmvc，寫了一個controller。
@RequestMapping("/uploadfile")
@ResponseBody
public Map jqueryUploadFile(MultipartFile file){
System.out.println(file.getOriginalFilename());
Map map=new HashMap();
map.put("name",file.getOriginalFilename());
return map;
}源碼差不多就這樣了。如果以上代碼拷貝之後跑不起來的童鞋，可以下方留言。