使用javascript/jquery觸發文件上傳對話框

Question

而不是使用<input type="file">，是否有可能使用<input type="text">，然後使用javascript或jquery編寫腳本，以便在單擊文本框時顯示文件上載對話框..... （並且將它提交到表單時實際上傳）

Answer 1

我懷疑由於安全原因您無法執行此操作。我似乎記得有一段時間，我試圖設置一個文件上傳元素的值屬性，這是你無法做到的，因爲你可以在未經用戶同意的情況下從用戶計算機上提取特定文件。我想這可能會擴展到以編程方式將文本框更改爲文件上傳元素，因爲您可以將文本字段的值設置爲要添加的文件，然後將其類型更改爲上傳元素並提交表單。

它應該是一個足夠簡單的嘗試，儘管我認爲你正在Javascript的限制內工作，因此如果你不能在原生JS中執行它，你不可能使用JQuery 。

希望這是有道理的，

JLove

Answer 2

你的意思是這樣的嗎？

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() { 
    $('input[type=file]').trigger('click'); 
}); 

$('input[type=file]').change(function() { 
    $('input[type=text]').val($(this).val()); 
}); 

但是請注意，由文件輸入給出的值是假出於安全考慮。如果你只想顯示文件名，你可以剪掉斜槓。

這裏有一個如何使用字符串分割和陣列的流行做一個例子：

http://jsfiddle.net/CSvjw/1/

$('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); 
}); 

您可以調整該進一步考慮使用正斜槓作爲目錄系統分隔器。同樣重要的是要注意，如果你這樣做，你將失去許多現代瀏覽器的功能，在這些瀏覽器中用戶可以將文件從計算機直接拖到文件輸入。如果我是你，我會通過設計文件輸入來接受這種範例，而不是試圖將文本輸入轉換爲不是的文本輸入。

Answer 3

不使用display:none或visibility:hidden最初在CSS

在Jquery的：

$(document).ready(function() { 
$('#file').hide(); 
$("#elementToBeClicked").click(function(){ 
    $('#file').click(); 
}); 
}); 

Answer 4

而且如果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/

Answer 5

我認爲你可以將綁定在輸入文本到一個jQuery/javascript函數，將創建代碼的文件輸入和用戶現在可以上傳文件

<input type="text" onclick="upload"/> 
jquery 
function upload(){ 
    $('[input type='text']').append('<input type="file"/>')