HTML5的 input:file上傳以及類型控制

時間 2019-11-13

標籤 html5 html input file 上傳以及類型控制欄目 HTML5 简体版

原文原文鏈接

以HTML5的文件上傳APIjavascript

以下demo代碼在.html文件打開便可：php

!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>HTML5文件上傳FileReader API</title>
</head>
<body>
<!--一個能上傳多媒體文件的表單-->
<input type="file" id="upload-file" multiple /> 
<!--顯示圖片的地方-->
<div id="destination"></div>
<script>
    document.getElementById('upload-file').addEventListener('change', function() {        
        var file;
        var destination = document.getElementById('destination');
        destination.innerHTML = '';//每次清空內容
 
        // 循環用戶多選的文件
        for(var x = 0, xlen = this.files.length; x < xlen; x++) {
            file = this.files[x];
            console.log(file);
            if(file.type.indexOf('image') != -1) { // 很是簡單的交驗，判斷文件是不是圖片
                var reader = new FileReader();//文件預覽對象
                reader.readAsDataURL(file);//設置要預覽的文件
                reader.onload = function(e) {//監聽文件加載完成事件
                    var img = new Image();//創鍵預覽圖片
                    img.src = e.target.result; //把預覽圖片的src設置爲e.target.result屬性。返回預覽文件的二進制內存數據
                    destination.appendChild(img);//在把每張圖片，放到預覽區域
                };
            }            
        }
    });
</script>
</body>
</html>

1、input:file屬性

屬性值有如下幾個比較經常使用：css

accept：表示能夠選擇的文件MIME類型，多個MIME類型用英文逗號分開，經常使用的MIME類型見下表。html

multiple：是否能夠選擇多個文件，多個文件時其value值爲第一個文件的虛擬路徑。java

一、accept

只能選擇png和gif圖片ajax

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

二、multiple

多選文件上傳json

<input id="fileId2" type="file" multiple="multiple" name="file" />

三、經常使用MIME類型

後綴名 MIME名稱 *.3gpp audio/3gpp, video/3gpp *.ac3 audio/ac3 *.asf allpication/vnd.ms-asf *.au audio/basic *.css text/css *.csv text/csv *.doc application/msword *.dot application/msword *.dtd application/xml-dtd *.dwg image/vnd.dwg *.dxf image/vnd.dxf *.gif image/gif *.htm text/html *.html text/html *.jp2 image/jp2 *.jpe image/jpeg *.jpeg image/jpeg *.jpg image/jpeg *.js text/javascript, application/javascript *.json application/json *.mp2 audio/mpeg, video/mpeg *.mp3 audio/mpeg *.mp4 audio/mp4, video/mp4 *.mpeg video/mpeg *.mpg video/mpeg *.mpp application/vnd.ms-project *.ogg application/ogg, audio/ogg *.pdf application/pdf *.png image/png *.pot application/vnd.ms-powerpoint *.pps application/vnd.ms-powerpoint *.ppt application/vnd.ms-powerpoint *.rtf application/rtf, text/rtf *.svf image/vnd.svf *.tif image/tiff *.tiff image/tiff *.txt text/plain *.wdb application/vnd.ms-works *.wps application/vnd.ms-works *.xhtml application/xhtml+xml *.xlc application/vnd.ms-excel *.xlm application/vnd.ms-excel *.xls application/vnd.ms-excel *.xlt application/vnd.ms-excel *.xlw application/vnd.ms-excel *.xml text/xml, application/xml *.zip aplication/zip *.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

2、樣式美化

請看博客：css input[type=file] 樣式美化，input上傳按鈕美化 http://www.haorooms.com/post/css_input_uploadmh數組

3、AJAX上傳文件

在說到ajax上傳文件。ajax上傳的時候，須要得到input:file選擇的文件（可能爲多個文件），獲取其文件列表爲：服務器

// input標籤的files屬性 document.querySelector("#fileId").files // 返回的是一個文件列表數組

得到的文件列表，而後遍歷插入到表單數據當中。即：app

// 得到上傳文件DOM對象 var oFiles = document.querySelector("#fileId"); // 實例化一個表單數據對象 var formData = new FormData(); // 遍歷圖片文件列表，插入到表單數據中 for (var i = 0, file; file = oFiles[i]; i++) { // 文件名稱，文件對象 formData.append(file.name, file); }

得到表單數據以後，就能夠用ajax的POST上傳。

// 實例化一個AJAX對象 var xhr = new XMLHttpRequest(); xhr.onload = function() { alert("上傳成功！"); } xhr.open("POST", "upload.php", true); // 發送表單數據 xhr.send(formData);

上傳到服務器以後，獲取到文件列表爲：

Array ( [jpg_jpg] => Array ( [name] => jpg.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpA595.tmp [error] => 0 [size] => 133363 ) [png_png] => Array ( [name] => png.png [type] => image/png [tmp_name] => D:\xampp\tmp\phpA5A6.tmp [error] => 0 [size] => 1214628 ) )