Input File 所選的File的屬性
我們會使用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;
再判斷是否為需要的副檔名,再上傳。