HTML5的 input:file上傳以及型別控制
以HTML5的檔案上傳API
如下demo程式碼在.html
檔案開啟即可:
<!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>
一、input:file
屬性
屬性值有以下幾個比較常用:
accept
:表示可以選擇的檔案MIME
型別,多個MIME
型別用英文逗號分開,常用的MIME
型別見下表。
multiple
:是否可以選擇多個檔案,多個檔案時其value
值為第一個檔案的虛擬路徑。
1、accept
只能選擇png和gif圖片
<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />
2、multiple
多選檔案上傳
<input id="fileId2" type="file" multiple="multiple" name="file" />
3、常用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
二、樣式美化
請看部落格:css input[type=file] 樣式美化,input上傳按鈕美化
三、AJAX
上傳檔案
在說到ajax
上傳檔案。ajax
上傳的時候,需要獲得input:file
選擇的檔案(可能為多個檔案),獲取其檔案列表為:
//input標籤的files屬性
document.querySelector("#fileId").files
// 返回的是一個檔案列表陣列
獲得的檔案列表,然後遍歷插入到表單資料當中。即:
// 獲得上傳檔案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
)
)
在服務端迴圈遍歷這個陣列就可以上傳檔案了。
相關文章
- HTML5的input:file上傳型別控制HTML型別
- input:file上傳型別控制簡單介紹型別
- input file控制元件限制上傳檔案型別控制元件型別
- input file簡單實現限制上傳檔案的型別型別
- input file圖片上傳
- input file美化 --上傳圖片
- input file上傳圖片預覽
- input file multiple 批量上傳檔案
- <input type="file"> 限制檔案型別型別
- 檢測input file檔案是否上傳
- 使用Input type=file 原生上傳使用總結
- HTML5新增的input型別程式碼演示HTML型別
- input[type=file] 獲取上傳檔案的內容
- 如何獲取<input type="file">上傳的檔名稱
- 修改input標籤type=file型別按鈕的值型別
- vue3中清空input type="file"上傳檔案Vue
- JavaScript input type=file 獲取檔案大小及型別限制JavaScript型別
- 將input type="file" 型別的圖片檔案轉成base64型別
- Resumable.js – 基於 HTML5 File API 的檔案上傳JSHTMLAPI
- input file利用FileReader實現圖片上傳程式碼例項
- input型別和限制型別
- 征服number型別的input框型別
- js如何限定圖片上傳的型別JS型別
- C#程式設計引用型別和值型別 以及引用傳遞和值傳遞C#程式設計型別
- input的type值型別和描述-HTML型別HTML
- No input file specified.
- input type="file"使用
- 清空file input框
- jQuery Validate限定上傳檔案的格式型別jQuery型別
- Python判斷上傳檔案型別Python型別
- js實現的判斷上傳圖片的型別JS型別
- jQuery匹配指定type型別input元素jQuery型別
- 如何清除<input type="file">的值
- type=“file”的input標籤美化
- Html5 檔案上傳HTML
- html5檔案上傳HTML
- 表示一個檔案的 File 型別型別
- 【Android】WebView的input上傳照片的相容問題AndroidWebView