当上传多个文件时，文件名显示在带有删除按钮的文本框中 [英] when upload multiple file, file name show in text box with a delete button

问题描述

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

when the user browse for multiple file, all the file name will show in the text box, there will have a delete button (an X) at the right side so that the user can remove the file.

我发现多个文件上传到文本框的编码，但它不能很好地工作。

I had found the coding for multiple file upload to text box, but it does not work well.

如下图所示

<FORM METHOD="post" ACTION="[e-mail]" 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/

here is the fiddle for the browse, the text box beside the browse should change the text, as the fiddle below http://jsfiddle.net/ccsGK/1731/

我认为脚本与每个其他，因此无法正常工作。

i think the script had crash with each other, therefore it unable to work well.

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

about the send button, it should link to the contact page after sending to gmail provided.

感谢。

推荐答案

js 由@ guest271314在 jsfiddle 发布：

js below originally posted by @guest271314 at 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;
}

这篇关于当上传多个文件时，文件名显示在带有删除按钮的文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！