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

因此上面的代码将生成名称为＆＃39; ques_32 []＆＃39;的输入框。多次。

我要做的是在每次点击时将所选文件值放在文本框中。

Answer 1

它实际上就像在文件输入上绑定更改事件一样简单，获取值并在文本输入上设置它。

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

出于安全原因，你不会得到真正的路径，所以你最终会得到类似/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);
});

FIDDLE

Answer 2

可以使用HTML5（即旧浏览器不支持）：见http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

将输入文件值输入文本框

2 个答案: