Retrieving File Names Out of a Multi-File Upload Control with JavaScript

Retrieving file names out of a multi-file upload control with javascript

Use the .files property of that element:

var elem = document.getElementById("id_upload");
var names = [];
for (var i = 0; i < elem.files.length; ++ i) {
   names.push(elem.files[i].name);
}

Reference:

Input.multiple — MDC
File — MDC

How to display selected file names before uploading multiple files in Struts2?

You can use the HTML5 files property of the <input type="file" /> element like follows:

updateList = function() {    var input = document.getElementById('file');    var output = document.getElementById('fileList');    var children = "";    for (var i = 0; i < input.files.length; ++i) {        children += '<li>' + input.files.item(i).name + '</li>';    }    output.innerHTML = '<ul>'+children+'</ul>';}

<input type="file" multiple       name="file"          id="file"    onchange="javascript:updateList()" />
<p>Selected files:</p>
<div id="fileList"></div>

Javascript - How to extract filename from a file input control

Assuming your <input type="file" > has an id of upload this should hopefully do the trick:

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}

How to get names of all files in the input type=file input that has the multiple attribute?

Try this,

var inp = document.getElementById('input-file-video');
for (var i = 0; i < inp.files.length; ++i) {
  var name = inp.files.item(i).name;
  alert("file name: " + name);
}

In jQuery, $('#input-file-video').get(0).files; will return the list of files that are uploaded. So you can loop through and get the files names.

Javascript get number of files and their filenames from file input element with multiple attribute?

In new browsers that support the HTML5 file stuff, your <input> element will have a "files" property. That will give you a "FileList" reference, which has a ".length" property. There's also an access method called ".item()" on the "FileList" instance, and it takes an integer arg to access individual "File" elements. Those have a ".name" property.

So:

var inp = document.getElementById('fileElementId');
for (var i = 0; i < inp.files.length; ++i) {
  var name = inp.files.item(i).name;
  alert("here is a file name: " + name);
}

This will of course not work in older IE versions, and I'm not even sure how thorough the Safari and Chrome support is; however, if you're writing pages with "multiple" set on your file inputs you're already dancing on the edge :-)

Multiple File Upload To Display File Names Only

If you just want to show the file names you don't need to use the img tag. You can change the code as following.

    if (window.File && window.FileList && window.FileReader) {                    $("#files").on("change", function (e) {                        var files = e.target.files,                            filesLength = files.length;                        for (var i = 0; i < filesLength; i++) {                            var f = files[i];                            $("<span class=\"pip\">" +                                    "<br/><span class=\"remove\"><i class='fa fa-times'></i>"+ f.name + "</span>" +                                    "</span>").insertAfter("#files");                                $(".remove").click(function () {                                    $(this).parent(".pip").remove();                                });                        }                    });                } else {                    alert("Your browser doesn't support to File API")                }

HTML5 Multiple File Upload: Set Filenames with JavaScript?

The append() method of FormData accepts a third optional filename parameter. You could:

<input type="file" name="image" accept="image/*" id="fileinput" multiple>
<button onclick="upload()">Upload</button>

<script>
  this.upload = function() {
    var fileInput = document.getElementById('fileinput');
    for (var i = 0; i < fileInput.files.length; i++) {

      var file = fileInput.files[i];
      var xhr = new XMLHttpRequest();
      var fd = new FormData();

      xhr.open("POST", "http://somehost.com/upload", true);    

      fd.append("upload_file", file, 'YOUR_FILENAME_' + file.name);

      xhr.send(fd);

    }
  }

</script>

How to display selected file names before uploading multiple files in javascript

  updateList = function () {
             var input = document.getElementById('fileUploader');
             var output = document.getElementById('divFiles');var HTML = "<table>";
             for (var i = 0; i < input.files.length; ++i)
             {
                 HTML += "<tr><td>" + input.files.item(i).name + "</td><td>      <button>X</button></td></tr>";
             }
             HTML += "</table>";
             output.innerHTML = HTML;

         }

Retrieving File Names Out of a Multi-File Upload Control with JavaScript