個人前端工具集(二)文件上傳的封裝

時間 2019-11-17

標籤個人前端工具文件上傳封裝欄目軟件設計简体版

原文原文鏈接

個人前端工具集(二)文件上傳的封裝css

liuyuhang原創，未經容許禁止轉載html

目錄前端

個人前端工具集jquery

1.文件上傳樣式與功能ajax

　　1.1.文件上傳的表現json

　　　　文件上傳控件的代碼比較簡單，功能都是瀏覽器封裝好的，實際上也沒啥很差的，就是難看瀏覽器

　　　　你作出來這個樣子，產品經理確定跟你急！！緩存

　　　　代碼也蠻容易的，以下：app

1 <input type="file" class="fileUpload" />

　　　　很少說了，反正我本身都看不過去（公司沒專職產品經理，我是個混合職業！）dom

　　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         }