上传多个文件时，文件名显示在带有删除按钮的文本框中

Question

当用户浏览多个文件时，所有文件名都会显示在文本框中，右侧会有一个删除按钮（一个X），以便用户删除文件。

我找到了将多个文件上传到文本框的编码，但效果不好。

最终结果应该如下图所示

<FORM METHOD="post" ACTION="xxx@gmail.com" ENCTYPE="multipart/form-data">
    <input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3"/>
    <div class="fileUpload btn btn-primary">
        <span>Browse</span>
        <input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile"/>
    </div>
    <input id="filename" type="text" />
    <div id="upload_prev"></div>    
    <div style="clear:both;"></div>
    <div class="buttonwrap">
        <a href="contactus.html" class="buttonsend" style="float:right;">Send </a>  
    </div>     
</FORM>  

这是我的脚本

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    var files = $('#uploadBtn')[0].files;
    for (var i = 0; i < files.length; i++) {
        $("#upload_prev").append(files[i].name);
    }
    document.getElementById('filename').value = filename;
}

这是小提琴

http://jsfiddle.net/WWNnV/629/

这里是浏览的小提琴，浏览旁边的文本框应该改变文本，如下面的小提琴 http://jsfiddle.net/ccsGK/1731/

我认为脚本已经相互崩溃，因此无法正常工作。

关于发送按钮，发送到提供的gmail后应该链接到联系页面。

谢谢。

Answer 1

js 以下最初由@guest271314 在jsfiddle 发布：

var files, res;

document.getElementById("uploadBtn").onchange = function (e) {
    e.preventDefault();
    document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    files = $('#uploadBtn')[0].files;
    res = Array.prototype.slice.call(files);
    for (var i = 0; i < files.length; i++) {
        $("#upload_prev").append("<span>" + files[i].name + "</span> <b>X</b><br>");
    }
    document.getElementById('filename').value = filename;
}

$(document).on("click", "#upload_prev span", function () {
    res.splice($(this).index(), 1);
    $(this).remove();
    console.log(res);

});

$(".buttonsend").on("click", function (e) {
    // $.post($("form").attr("action"), res)
    // e.preventDefault();
    // e.stopPropagation();
    if (res.length) $.post("/echo/json/", {
        json: JSON.stringify(res)
    }).then(function (data) {
        console.log(data)
    })
})

一些CSS

span {
    float: left;
    display: flex;
    width: 100%;
}
p.closed {
    margin: 0 0 0 7px;
    cursor: pointer;
}

Answer 2

html

<FORM METHOD="post" ACTION="xxx@gmail.com" ENCTYPE="multipart/form-data">
    <input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" />
    <div class="fileUpload btn btn-primary">
<span>Browse</span>

        <input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" />
    </div>
    <input id="filename" type="text" />
    <div id="upload_prev"></div>
    <div style="clear:both;"></div>
</FORM>
<div class="buttonwrap">
<a href="#" class="buttonsend" style="float:right;">Send </a> 
</div>

js

// define `files` , `res` variables
var files, res;

document.getElementById("uploadBtn").onchange = function (e) {
    e.preventDefault();
    document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;

function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    files = $('#uploadBtn')[0].files;
    // set `res` to array of file objects
    res = Array.prototype.slice.call(files);
    for (var i = 0; i < files.length; i++) {
        $("#upload_prev")
        .append("<span>" + files[i].name + "</span> <b>X</b><br>");
    }
    document.getElementById('filename').value = filename;
}
// remove `file` from `res` 
// e.g., click `X` to remove file from `res`
$(document).on("click", "#upload_prev span", function () {

    if (res.length) {
      res.splice($(this).index(), 1);
      $(this).remove();
    }
    console.log(res);

});

// send adjusted `res` array of file objects to server
$(".buttonsend").on("click", function (e) {
    // $.post($("form").attr("action"), res)
    // e.preventDefault();
    // e.stopPropagation();
    if (res.length) {
        $.post("/echo/json/", {
          json: JSON.stringify(res)
        }).then(function (data) {
          console.log(data)
        })
    }
})

jsfiddle http://jsfiddle.net/WWNnV/633/