原文網址:
http://www.webcodegeeks.com/html5/html5-file-upload-example/
本文將為大家展示如何使用HTML5來讀取使用者選擇的檔案資訊並將檔案上傳到一個伺服器上.
FileApi是HTML5新新增的功能中最有趣的一個. 我們可以在檔案上傳到伺服器前讀取顯示檔案的資訊, 並且可以不使用post表單的方式來傳送檔案.
下文將展示如何讀取用戶選擇的文件資訊, 並使用Ajax異步上傳這些文件.
1.顯示文件1
1.顯示文件
. HTML程式碼如下
<input type="file" id="fileinput" />
當使用者選擇一個檔案時, inpupt元素會產生「簡單, 它在input元素中添加了”files”屬性.
小結: “files”屬性不可寫, 只能讀取其中的內容. 您可能注意到了, 使用this.files[0]就可以獲得使用者選擇的第一個檔案.
1.2: 多個檔案
現在我們要顯示使用者所選的全部檔案資訊。我們只需要在input元素中添加”multiple”屬性, 這樣就可以允許用戶選擇多個文件上傳.
document.getElementById('fileinput').addEventListener('change', function(){
var file = this.files[0];
// This code is only for demo ...
console.log("name : " + file.name);
console.log("size : " + file.size);
console.log("type : " + file.type);
console.log("date : " + file.lastModified);
}, false);小結: 您還可以添加”accept”標籤來過濾用戶可以上傳的文件類型. 例如,當您只希望用戶上傳圖片時, 只需要過濾出MIME類型”image/*”即可:
<input type="file" id="fileinput" multiple="multiple" />
1.3 預覽文件
我們既可以讀取文件信息, 也能讀取文件的內容. 例如, 我們可以在上傳之前預覽文件.
以預覽圖片舉例:
HTML程式碼如下:
document.getElementById('fileinput').addEventListener('change', function(){
for(var i = 0; i<this.files.length; i++){
var file = this.files[i];
// This code is only for demo ...
console.group("File "+i);
console.log("name : " + file.name);
console.log("size : " + file.size);
console.log("type : " + file.type);
console.log("date : " + file.lastModified);
console.groupEnd();
}
}, false); gallery.js onload方法在檔案內容讀取結束後像事件一樣被呼叫, 然後檔案內容會被賦值到image元素的src屬性中: aImg.src = e.target.result;
2.上傳檔案 每一個使用者選擇的檔案都會建立一個HTTP請求傳送到伺服器上. 來上傳檔案. 現在, 我們將使用uploadFile方法來上傳選取的檔案.
以上就介紹了HTML5 檔案上傳範例，包含了方面的內容，希望對PHP教學有興趣的朋友有幫助。
previewImage函數將會顯示使用者選擇的檔案.<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
登入後複製我們引入了FileReader物件來非同步讀取檔案內容. 透過使用new FileReaderReader 讀取實例文件的數據.
Upload images ...
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
登入後複製
這個方法將會產生一個ajax請求(透過post方式)到指定的url, 並傳送」upload_file」請求參數中的檔案內容. 我們可以透過$_FILES['upload_file']來取得這個參數.var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
var files = this.files;
for(var i=0; i<files.length; i++){
previewImage(this.files[i]);
}
}, false);登入後複製
Js如下:
function previewImage(file) {
var galleryId = "gallery";
var gallery = document.getElementById(galleryId);
var imageType = /image.*/;
if (!file.type.match(imageType)) {
throw "File Type must be an image";
}
var thumb = document.createElement("div");
thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div
var img = document.createElement("img");
img.file = file;
thumb.appendChild(img);
gallery.appendChild(thumb);
// 使用FileReader来显示图片内容
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
登入後複製 全部原始碼
function uploadFile(file){
var url = 'server/index.php';
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Every thing ok, file uploaded
console.log(xhr.responseText); // handle response.
}
};
fd.append("upload_file", file);
xhr.send(fd);
}登入後複製
