1.檔案上傳樣式與功能
1.1.檔案上傳的表現
檔案上傳控件的代碼比較簡單，功能都是浏覽器封裝好的，實際上也沒啥不好的，就是難看
你做出來這個樣子，産品經理肯定跟你急！！
代碼也蠻容易的，如下：
1 <input type="file" class="fileUpload" /> 不多說了，反正我自己都看不過去（公司沒專職産品經理，我是個混合職業！）
1.2.需求描述
- 任意的按鈕或某種html控件，點選以後能夠使用上傳控件的功能
- 選擇檔案後檔案的路徑要與檔案名要能夠正确的顯示出來
2.封裝思路
2.1.隐藏 file 控件
第一反應是style=“display：none”
然而網上搜了一下，竟然很多人說style="opacity: 0"，然後将制作後的控件的z-index提前，
同時調整相對位置，将原控件覆寫。
提供這種方案的，你有病麼？哪裡抄的？透明度為0但是還占位，東西還存在，還要寫很多内容
來調整位置。。。
腦袋有泡。
2.2.click事件關聯調用
type=“file”的input元素本身是有内置的click事件的，我們需要将自己重寫的html的點選事件，來擷取
隐藏的type=“file”的input元素，然後調用其click事件，這樣就能夠完成上傳功能。
2.3.上傳的檔案路徑顯示
檔案是否選擇成功，選擇的什麼檔案，需要有一個“空間”來接收并顯示，浏覽器自身的上傳控件後面，
會在選擇了檔案以後，顯示檔案名的。
使用console.log($("#fileInput").val())，和console.log($("#fileInput"))列印的内容如下圖：
展開jquery對象後，在value屬性中找到了上述資訊，如下圖：
是以擷取檔案名也不是啥難事了。
3.代碼
3.1.HTML代碼如下：
1 <!-- 上傳控件 -->
2 <div id="fileUploadList">
3 <div class="input-group" style='margin:5px 0px 5px 0px'>
4 <!-- 隐藏的檔案上傳按鈕,太tmd難看 -->
5 <input type="file" class="fileUpload" style="display: none" />
6 <!-- 重做的上傳按鈕,各種綁定 -->
7 <span class="input-group-btn">
8 <button class="btn btn-default chooseFile" type="button">選擇</button>
9 <button class="btn btn-warning modifyChooseFile" type="button">修改</button>
10 <button class="btn btn-success fileUploadSubmit" type="button">上傳</button>
11 </span> <input type="text" class="form-control" readonly="readonly">
12 </div>
13 </div> 3.2.JS代碼如下：
1 $(function() {
2 fileUploadListener("fileUploadList"); //初始化監聽器
3 })
4 /**
5 * 監聽器
6 */
7 function fileUploadListener(id) {
8 $("#" + id + " .btn").unbind("click"); //移除監聽器
9 //文本框綁定監聽器
10 $("#" + id + " .fileUpload").change(function() {
11 $(this).next().next().val($(this).val());
12 })
13 //選擇檔案按鈕監聽器
14 $("#" + id + " .chooseFile").click(function() {
15 $(this).parent().prev().click();
16 console.log($(this).parent().prev())
17 });
18 //修改按鈕監聽器
19 $("#" + id + " .modifyChooseFile").click(function() {
20 $(this).parent().prev().click();
21 console.log($(this).parent().prev())
22 });
23 //上傳按鈕監聽器
24 $("#" + id + " .fileUploadSubmit").click(function() {
25 var dom = $(this).parent().prev();
26 testUpload(dom);
27 });
28 } 3.3.異步檔案上傳代碼如下：
1 /*
2 * 點選上傳按鈕的submit的函數
3 */
4 function testUpload(dom) {
5 var fileObj = dom[0].files[0];//檔案上傳控件中的file資訊擷取
6 if (null == fileObj || '' == fileObj || 'undefinded' == typeof fileObj) {//校驗
7 dom.next().next().val("你未選擇任何檔案!");//提示
8 return null;
9 }
10 if (fileObj.size > 1024 * 1024 * 10) { //檔案大于10m
11 dom.next().next().val("你選擇的檔案太大了,超過了10M,限制上傳");//提示
12 return null;
13 }
14 var fileForm = new FormData(); //建立file from
15 fileForm.append("action", "UploadVMKImagePath"); //修改頭
16 fileForm.append("file", fileObj); //添加檔案對象
17
18 var data = fileForm;
19
20 $.ajax({
21 url : local + "/testFileUpload.do", //測試上傳檔案接口
22 data : data,
23 type : "Post",
24 dataType : "json",
25 cache : false, //上傳檔案無需緩存
26 processData : false, //用于對data參數進行序列化處理 這裡必須false
27 contentType : false, //頭資訊修改,必須
28 success : function(resultMap) {
29 console.log(resultMap);//擷取的傳回資訊
30 console.log("上傳完成!");
31 },
32 error : function(resultMap) {
33 console.error(resultMap);
34 }
35 })
36 } 代碼自己看，反正内容不多！！
4.效果
好歹能看了，css自己改去吧。檔案已經躺在本地了！