HTML5的技術越來越成熟,以往很多很難做到的功能,現在都可以很快速的達成。例如檔案的上傳就是一個例子,透過File API就可以在輕易的取得使用者欲上傳檔案的資訊,也方便實作前端與使用者互動的判斷。
File API中包含了許多JavaScript 物件:
- File:可以用來存取硬碟中的檔案。
- Blob:表示儲存在檔案中的原生資料。
- FileList:File物件所成的集合。
- FileReader:用來讀取檔案。
前置作業:
在使用File API之前,必須先測試瀏覽器是否支援(目前大部份瀏覽器都有支援)
//檢查瀏覽器是否支援File API if (window.File && window.FileReader && window.FileList && window.Blob) { alert("support"); } else { alert('not support.'); }
Input File
1.取得檔案資訊
HTML
jQuery
$('#file_test').change(function(event){ //Filelist Object var filelist = event.target.files; var str = ""; for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] str += "name:" + escape(file.name) + "\n" + //檔名 "type:" + file.type + "\n" + //檔案類型 "size:" + file.size + "\n" + //檔案大小 "lastModifiedDate:" + file.lastModifiedDate.toLocaleDateString() + "\n\n\n"; //最後修改日期 } alert(str); });
2.取得檔案內容(範例為選取圖片後立即顯示)
HTML
jQuery
('#file_test').change(function(event){ //Filelist Object var filelist = event.target.files; for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] //判斷是否為圖片 if (!file.type.match('image.*')) { continue; } //FileReader Object var reader = new FileReader(); //定義執行動作 reader.onload = (function(file){ return function(event){ //event.target.result為檔案的編碼 var str = ''; ('#list').append(str);
};
})(file);
//利用DataURL的方式讀取圖片
reader.readAsDataURL(file);
}
});
3.上傳檔案到伺服器
HTML
jQuery
('#file_test').change(function(event){ //Filelist Object var filelist = event.target.files; //建立FormData Object var formData = new window.FormData(); for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] //將檔案加進FormData formData.append( 'test_file' + i, file ); } //利用ajax傳送到伺服器 .ajax({
url: 'upload.php',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});
Drag、Drop File
1.桌面拖曳上傳介面-取得檔案資訊
HTML
Drop files here
jQuery
//jQuery event預設是沒有dataTransfer,需要手動加進去
jQuery.event.props.push('dataTransfer');
//加入dragover和drop
('#drop').on('dragover', function(event){ //停止開啟檔案及其他動作 event.stopPropagation(); event.preventDefault(); //複製拖移的物件 event.dataTransfer.dropEffect = 'copy'; }); ('#drop').on('drop', function(event){
//停止開啟檔案及其他動作
event.stopPropagation();
event.preventDefault();
//透過dataTransfer取得FileList object.
var filelist = event.dataTransfer.files;
var str = "";
for(var i = 0; i < filelist.length ; i++ ) {
var file = filelist[i]
str += "name:" + escape(file.name) + "\n" +
"type:" + file.type + "\n" +
"size:" + file.size + "\n" +
"lastModifiedDate:" + file.lastModifiedDate.toLocaleDateString() + "\n\n\n";
}
alert(str);
});
2.桌面拖曳上傳介面-取得檔案內容
jQuery.event.props.push('dataTransfer');
('#drop').on('dragover', function(event){ //停止開啟檔案及其他動作 event.stopPropagation(); event.preventDefault(); //複製拖移的物件 event.dataTransfer.dropEffect = 'copy'; }); ('#drop').on('drop', function(event){
//停止開啟檔案及其他動作
event.stopPropagation();
event.preventDefault();
//取得原始檔案
var filetmp = event.originalEvent.dataTransfer.files;
//複數檔案
for (var i = 0; i < filetmp.length; i++) {
var file = filetmp[i];
//取得檔案內容
var reader = new FileReader();
//讀取中執行的function
reader.onprogress = function (evt) {
//確定evt 是 ProgressEvent.
if (evt.lengthComputable) {
//計算百分比
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
//注意,percentLoaded不會在onprogress中達到100
if (percentLoaded < 100) {
console.log(percentLoaded);
}
}
};
reader.onload = (function(file){
return function(event) {
//如果前端有做進度條,onload要手動調成100%
//檔案類型
console.log(file.type);
//檔案內容
console.log(event.target.result);
};
})(file);
reader.readAsText(file);
}
});