при загрузке нескольких файлов, имя файла отображается в текстовом поле с кнопкой удаления

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/