小賴的實戰記錄

我們會使用input type = file 的時候

這時候會跳出選擇檔案的視窗，選擇後，會得到檔案，

我這次要做的事，取得選擇的檔案的各種屬性，來判斷，是否可以上傳。

首先我有看到別人寫的程式碼，

是可以動態建立一個input type = file

當按下了button之後，動態產生，並跳出選擇檔案的視窗，並對選擇完之後，做一些處理

			filePicker = document.createElement('input');
			filePicker.type = 'file';
			filePicker.style.overflow = 'hidden';
			filePicker.style.width = '1px';
			filePicker.style.height = '1px';
			filePicker.style.opacity = 0.1;
			filePicker.multiple = 'multiple';
			filePicker.position = 'absolute';
			filePicker.zIndex = 1000;

			document.body.appendChild(filePicker);
			filePicker.addEventListener('change', function () {
				var count = filePicker.files.length;
			});
			
			filePicker.accept = '.jpg, .png, .jpeg, .gif, .bmp, .tiff|images/*';
			filePicker.click();

我對filePicker.files取得第0個項目取得檔案，並跑他的所有屬性

						var file = filePicker.files[0];

						for (var key in file){
							alert(key + ":" + file[key]);
						}	

得到檔案有以下的屬性與方法

name
lastModified
lastModifiedDate
webkitRelativePath
size
type
slice

再使用

file.name 去取得他的副檔名

使用以下方式

var fileExtension = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;

再判斷是否為需要的副檔名，再上傳。