而不是使用<input type="file">
,是否有可能使用<input type="text">
,然後使用javascript或jquery編寫腳本,以便在單擊文本框時顯示文件上載對話框..... (並且將它提交到表單時實際上傳)使用javascript/jquery觸發文件上傳對話框
27
A
回答
2
我懷疑由於安全原因您無法執行此操作。我似乎記得有一段時間,我試圖設置一個文件上傳元素的值屬性,這是你無法做到的,因爲你可以在未經用戶同意的情況下從用戶計算機上提取特定文件。我想這可能會擴展到以編程方式將文本框更改爲文件上傳元素,因爲您可以將文本字段的值設置爲要添加的文件,然後將其類型更改爲上傳元素並提交表單。
它應該是一個足夠簡單的嘗試,儘管我認爲你正在Javascript的限制內工作,因此如果你不能在原生JS中執行它,你不可能使用JQuery 。
希望這是有道理的,
JLove
78
你的意思是這樣的嗎?
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
$('input[type=file]').change(function() {
$('input[type=text]').val($(this).val());
});
但是請注意,由文件輸入給出的值是假出於安全考慮。如果你只想顯示文件名,你可以剪掉斜槓。
這裏有一個如何使用字符串分割和陣列的流行做一個例子:
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
$('input[type=file]').change(function() {
var vals = $(this).val(),
val = vals.length ? vals.split('\\').pop() : '';
$('input[type=text]').val(val);
});
您可以調整該進一步考慮使用正斜槓作爲目錄系統分隔器。同樣重要的是要注意,如果你這樣做,你將失去許多現代瀏覽器的功能,在這些瀏覽器中用戶可以將文件從計算機直接拖到文件輸入。如果我是你,我會通過設計文件輸入來接受這種範例,而不是試圖將文本輸入轉換爲不是的文本輸入。
6
不使用display:none
或visibility:hidden
最初在CSS
在Jquery的:
$(document).ready(function() {
$('#file').hide();
$("#elementToBeClicked").click(function(){
$('#file').click();
});
});
6
而且如果HTML代碼具有相同的多個輸入象下面這樣: -
<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>
在@ treeface的答案上進行擴展,Jquery代碼(當前版本1.8.0)應該是:
$('input[type=text]').click(function() {
$(this).parent(".item")
.find('input[type=file]')
.trigger('click');
});
$('input[type=file]').change(function() {
$(this).parent(".item")
.find('input[type=text]')
.val($(this).val());
});
請注意jQuery中的$ parents()和$ parent()之間。試試吧@http://jsfiddle.net/afxDC/
0
我認爲你可以將綁定在輸入文本到一個jQuery/javascript函數,將創建代碼的文件輸入和用戶現在可以上傳文件
<input type="text" onclick="upload"/>
jquery
function upload(){
$('[input type='text']').append('<input type="file"/>')
相關問題
- 1. 文件上傳對話框的觸發器顯示事件
- 2. 使用GWT和對話框瀏覽文件的文件上傳
- 3. 使用plupload手動觸發「打開文件對話框」
- 4. 上傳文件對話框位置
- 5. 對話框創建後jQuery ui對話框觸發事件
- 6. 在jQuery UI對話框中無法使用文件上傳
- 7. 使用jQuery對話框攔截文件上傳提交
- 8. 使用IE上傳iFrame文件產生下載對話框
- 9. 使用部分視圖在jQuery對話框中上傳文件
- 10. 使用javascript阻止文件上傳對話框
- 11. Ajax發佈成功後打開文件上傳對話框
- 12. 如何在Selenium中使用Windows上傳對話框處理文件上傳
- 13. Extjs在對話關閉時輸入文件對話框觸發事件
- 14. 事件觸發文件上傳在asp.net
- 15. 從初始jQuery對話框觸發第二個jQuery對話框
- 16. 爲靜態文件觸發保存對話框 - Flash
- 17. 使用遠程Selenium服務器並使用filechooser對話框上傳文件
- 18. 即使禁用,上傳組件仍然會打開對話框
- 19. 插件開發:使用FileDialog創建新文件對話框
- 20. 擴展庫對話框和文件上傳控件
- 21. 從觸發器開始對話框
- 22. Android:觸發onResume的對話框
- 23. jquery對話框關閉不被觸發
- 24. Dynamics CRM:Javascript觸發器打開對話框
- 25. 觸發文件上傳與jQuery
- 26. 只通過Javascript觸發文件上傳
- 27. blueimp jQuery文件上傳未被觸發
- 28. 如何在對話框外發生點擊時觸發事件
- 29. 使用json文件創建對話框
- 30. 使用MULTER上傳文件:posr route不會觸發
爲什麼你想去做這個?一個上傳輸入類型確實是 – qwertymk 2010-12-21 18:31:47
是啊,基本上我不希望瀏覽按鈕顯示...幾乎 – 2010-12-21 19:53:50
如果您使用[jQuery文件上傳](https://github.com/blueimp/jQuery -File-Upload),你可以通過html和css實現:``。 – 2013-06-10 09:43:56