принести имя файла/изображения загружены

Question

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

<form action="abc.php" method="post"> 
    <input name="fileToUpload" type="file" /> 
    <div id="view"></div> 
    <button type="submit" value="submit" name="submit">Submit</button> 
</form> 

Я хочу, чтобы принести имя файл/изображений закачанных по щелчку этого ввода и отображения его под <div id="view"></div>, но это необходимо сделать до подачи формы. может кто-нибудь, пожалуйста, как это можно сделать

Answer 1

Попробуйте этот код, он, несомненно, поможет

<input type="file" id="files" name="files[]" multiple /> 
<output id="list"></output> 

Script Code

function handleFileSelect(evt) { 
     var files = evt.target.files; // FileList object 

     // files is a FileList of File objects. List some properties. 
     var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
         f.size, ' bytes, last modified: ', 
         f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
         '</li>'); 
     } 
     document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
     } 

     document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Answer 2

Попробуйте обновить свой код к следующему,

<form action="abc.php" method="post"> 
    <input name="fileToUpload" id="files" type="file" /> 
    <div id="view"></div> 
    <button type="submit" value="submit" name="submit">Submit</button> 
</form> 
<script> 
var control = document.getElementById("files"); 
control.addEventListener("change", function(event) { 
    // When the control has changed, there are new files 
    var i = 0, 
     files = control.files, 
     len = files.length; 
    for (; i < len; i++) { 
     document.getElementById('view').innerHTML = files[i].name; 
    } 

}, false); 
</script> 

Надеюсь, это поможет.