當我在用js開發檔案上傳的功能時，我發現當File Field的欄位是空的時候，就會出現"No file chosen"(未選擇檔案)提示。我看了stackoverflow的一些解法，但沒有一個是成功的。
|
| <html> |
不過我用gmail附件功能時，發現的確是有辦法移除預設的提示，改用自訂的提示。
Gmail可以客製化檔案上傳提示
所以我花了一些時間去trace gamil的source code，發現那個Attach files”按鈕，只是一個div tag，當然可以自訂提示。但是div tag因為安全性因素，是無法trigger檔案選擇器的，一定要file input field才有這個權限。
但是為什麼gmail卻可以做到？其實呢，div tag只是一個wrapper，還是有一個file input field隱藏在背景的。一旦div tag收到click event，我們只要控制程式去trigger file input field的click event可以達到這樣的效果。然後只要在file input field聽onchange event，就可以知道user選哪些檔案了！
以下是ExtJS的範例關於file input field wrapper的範例：
Custom Tooltip for File Uploading in ExtJS
Ext.define('TonyTuan.BrowseButton', {
extend : 'Ext.button.Button',
icon : 'css/images/arrow_up_16x16.png',
text : 'Browse...',
constructor : function(config) {
var me = this;
config.tooltip = 'Attach Files'; // Show custom tooltip instead of "No file chosen".
me.callParent([ config ]);
},
handler : function() {
document.getElementById('upload-field').click(); // To trigger the file field click event
}
});
Ext.define('TonyTuan.FileGrid', {
extend : 'Ext.grid.Panel',
alias : 'widget.fileGrid',
title : 'Files',
store : 'File',
initComponent : function() {
var me = this;
me.columns = [ {
dataIndex : 'filename',
header : 'Filename',
} ];
me.tbar = [ Ext.create('TonyTuan.BrowseButton', {
itemId : 'browseButton'
}) ];
me.callParent(arguments);
}
});
Ext.define('TonyTuan.FilePanel', {
extend : 'Ext.panel.Panel',
title : 'Files',
layout : 'border',
initComponent : function() {
var me = this;
me.items = [ {
region : 'center',
xtype : 'fileGrid',
layout : 'fit',
flex : 3,
margins : '5 5 0 0'
}, {
hidden : true,
region : 'north',
xtype : 'component',
html : '<input type="file" multiple id="upload-field"/>'
} ];
me.callParent(arguments);
me.on({
afterrender : function() {
document.getElementById('upload-field').onchange = function() {
var files = document.getElementById('upload-field').files;
console.log('files', files);
// Add files to your fileGrid store
};
}
});
}
});
沒有留言:
張貼留言