H5標籤input標籤上傳檔案（一）

阿新 • • 發佈：2019-01-14

之前專案做檔案上傳（本篇著重講純圖片上傳）的時候，一般都是用的flash外掛。
H5的input標籤提供了type=file的檔案上傳功能，那麼如何用這個標籤實現前後端之間的檔案上傳呢。
百度了一下，一個能用的都沒有，都有BUG，講的也很複雜，好氣喔，自己寫吧！

先看部分程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>H5input標籤上傳檔案</title>
        <script 
 type="text/javascript" src="jquery.min.js"></script>
    </head>

    <body>
        <input type="file" name="image" accept="image/*" onchange="uploadImg()">

        <script type="text/javascript">

            function uploadImg(event) {
                var e=window.event||event;
                // 獲取當前選中的檔案 

                var oFile = e.target.files[0];
                console.log(oFile);//列印值看下面圖片,簡單點的話我們直接把這個資料給後臺處理就可以了

                //接下來按照跟後臺約定好的進行資料互動就可以-不使用jq的話這裡有一些細節，稍後解釋
                $.post("約定好的url地址",oFile,function(result){
                    console.log(result);
                })
            }
         
</script>
    </body>

</html>

上面console.log(oFile);這一行程式碼列印的結果如下：
這裡寫圖片描述
簡單點，寫部落格的方式簡單點，不要為了顯擺自己的技術寫一堆API文件都可以查到的東西。
這裡給想深入瞭解的H5上傳的同學三個相關的知識連結（沒錯，MDN上的API描述）：
FormData
FileReader()
Blob()

上面只是一個簡陋的方案（但完全可用），接下來讓我們完善一下！

既然做的是單張圖片上傳功能，這裡我在input標籤上加了一個accept="image/*" 做了一個基本的型別限制，這樣你在選擇檔案的時候你會發現你能選擇檔案型別是圖片檔案。
這裡寫圖片描述

我們可以自定義可上傳的檔案型別，用如下方式指定多種型別：
<input type="file" accept=".doc,.docx,.pdf,.txt,.htm,.html" />

但是這並不能防止使用者的惡意操作（主要是堵住測試和後臺的嘴,☺），另外就算是選擇型別是圖片的話，其實還是可以選擇少部分其它格式例如.zip。
利用之前給展示過的oFile列印結果中的type欄位

// 檢查上傳檔案型別--新增到傳送資料之前
if(['jpeg', 'png', 'gif', 'jpg'].indexOf(oFile.type.split("/")[1]) < 0) {
    // alert太ugly了，用你們系統的報錯彈窗就行（如果有）
    alert("上傳的檔案必須是圖片格式");
    return;
}

好，圖片的格式算是限制了，數組裡面沒涉及到的格式你自己往裡面加。

額外補充一點，你會發現當我要做上傳所有型別的檔案時，通過oFile.type去判斷檔案型別好像有點問題，那麼這裡我提供一個穩妥的辦法，我們通過oFile.name去判斷，程式碼如下：

// 限制檔案型別
var fileType = oFile.name.substr(oFile.name.lastIndexOf(".")+1);
if (['doc', 'docx', 'pdf', 'txt', 'htm', 'html'].indexOf(fileType) < 0) {
    alert("只支援.doc .docx  .pdf  .txt  .htm .html格式檔案");
    return;
 }

上傳檔案的大小也限制一下，前端做限制很簡單，利用之前oFile列印結果中的size欄位，這裡API給我們返回的是所選檔案的位元組數，1KB=1024位元組，1MB=1024KB。利用以上，我們加個判斷：

var imgMaxSize = 1024 * 1024 * 4; // 4MB圖片的位元組數
if(oFile.size>imgMaxSize){
    alert("您可上傳檔案的最大限制為4MB");
    return;
}

如果你用的是jquery.ajax,並且你上傳的是文件檔案，可能ajax會對你的檔案進行預處理，然後你就可能遇到如下錯誤：
Illegal invocation這時候我們在ajax裡面配置一下選項processData:false, 關掉jquery的預處理就行了，一般這種問題多發生在文件檔案上。

$.ajax({
    type:'POST',
    url:url,
    data:formData,
    contentType:undefined,
    processData:false,            
    success:function(data){}
 });

還有一些東西，例如圖片上傳前壓縮啊什麼的，不想寫長篇，這裡先不講了，在這裡放一個簡單完整版的程式碼，方便我自己以後copy，你們要用自己拿，別客氣！

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>H5-input標籤上傳檔案</title>
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>

    <body>
        <input type="file" accept="image/*" onchange="uploadImg()">

        <script type="text/javascript">
            function uploadImg(event) {

                var e = window.event || event;
                var oFile = e.target.files[0];
                //console.log(oFile);

                var imgMaxSize = 1024 * 1024 * 4; //4MB

                // 限制檔案型別
                if(['jpeg', 'png', 'gif', 'jpg'].indexOf(oFile.type.split("/")[1]) < 0) {
                    alert("僅可以上傳圖片格式檔案");
                    return;
                }

                //限制大小
                if(oFile.size > imgMaxSize) {
                    alert("檔案最大為4MB");
                    return;
                }

                var data=new FormData();
                data.append("filesData",file);//這裡不管怎樣，我決定還是用formdata的方式上傳。

                $.post("約定地址",data,function(result){
                    console.log(result);
                })

            }
        </script>
    </body>

</html>

H5標籤input標籤上傳檔案（一）

H5標籤input標籤上傳檔案（一）

使用form表單上傳檔案（一）

springboot/springmvc上傳檔案（CommonsMultipartResolver）

angularjs手機webapp 利用input拍照，相簿選擇、縮圖顯示上傳圖片（一）

SpringMVC上傳檔案（圖片）並儲存到本地

國慶七篇-----struts2的檔案上傳下載（一）

使用表單上傳檔案（二）

commons-fileupload上傳檔案（圖片）時路徑寫入資料庫時斜槓的問題

一鍵jquery非同步上傳檔案（圖片）的實現（檔案上傳進度讀取未做）

springmvc上傳檔案（圖片）

js上傳檔案（圖片）限制格式及大小為3M · 觀止

js上傳檔案（圖片）限制格式及大小

Cisco 路由器上傳IOS（一）

上傳漏洞（一）

wangEditor的使用及上傳圖片（一）

Vue + Canvas 實現頭像截圖上傳功能（一）

Ajax 上傳檔案（input file FormData）

用form表單input type="file"上傳檔案（提交前判斷）

ASP 使用 jQuery Ajax File Uploader外掛上傳檔案（適用於支援H5的瀏覽器）

input file實現多次上傳檔案（不會覆蓋上次上傳的檔案）

H5標籤input標籤上傳檔案（一）

相關推薦