when upload multiple file, file name show in text box with a delete button

Question

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.

the final result should look like the image below

<FORM METHOD="post" ACTION="[email protected]" 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>  

this is my script

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

here is the fiddle

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

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.

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

thanks.

Spontaneity

if you can call one reset button to clear file name that would be better option – Larhondalari

This is my final result: jsfiddle.net/WWNnV/638 – Spontaneity

Answer 1

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

some css

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

Caravel

@ShowStopper Hi, it looks like you just copied most of this content from jsfiddle.net/WWNnV/632 , jsfiddle.net/WWNnV/633 , stackoverflow.com/a/32002677 . Can you edit your post and give attribution to the author? Plagiarism isn't really welcomed on Stack Overflow, and it's always nice to give credit where credit is due. Good luck! – Maybe

Answer 2

html

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

Maybe