search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

[HTML]File API with jQuery

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);
	}
});


熱門推薦

本文由 blogjohnsonluorg 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦