獲取輸入文件的值到文本框中

Question

單擊按鈕后，我得到一個文件輸入框作為數組。

<input type='button' class='tiny button radius' value='+' id='addButton' data-id='".$v->quid."' data-role='image'>




 $("#addButton").click(function () {

        var newTextBoxDiv = $(document.createElement('div'));
        newTextBoxDiv.after().html('<div class="row">
<div class="large-4 columns left button-mar-top-btm">
<label class="tiny button radius multipleimg">
<input type="file" name="ques_'+quid+'[]' + '" id="ques_'+quid+'[]' + '">Upload Photo</label> </div>
<div class="large-6 columns button-mar-top-btm">
<input class="file-upload-input" type="text"></div>
<div class="large-2 left columns button-mar-top-btm">
<a href="#" class="removeField" >Remove</a></div></div>');
        });

因此上述代碼將多次生成名稱為“ ques_32 []”的輸入框。

我想做的是每次單擊將選定的文件值放在文本框中。

Answer 1

實際上，就像將更改事件綁定到文件輸入上，獲取值並將其設置在文本輸入上一樣簡單。

$('#ques_32\\[\\]').on('change', function() {
    $('#filename').val(this.value)
});

出於安全原因，您不會獲得真實的路徑，因此最終會得到類似/fakepath/filename.png類的/fakepath/filename.png 。

對於多個文件並僅獲取文件名，因為無論如何都無法獲取路徑，因此可以執行以下操作

$('#ques_32\\[\\]').on('change', function(e) {
    var filenames = [].slice.call(e.target.files).map(function(f) {
        return f.name;
    }).join(', ')

    $('#filename').val(filenames);
});

小提琴

Answer 2

可以使用HTML5（例如，舊版瀏覽器不支持）：請參閱http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api