CODEWITHSUNDEEP
phpjavascriptjqueryfile-upload
Eoin Murray
Eoin Murray

Reputation: 1955

Using .val() to check for form values for a multiple file upload file

I have a multiple-file upload form and I want to concurrently display the files names that have been selected, I have this form:

   <form  id="upload" enctype="multipart/form-data" action="upload_file.php" method="post">
   <input id="choosefile" type="file" name="file[]" multiple/>
   <input type="submit" />
   </form>

and I want to print out the file names that are being uploaded using this jQuery script

   <script>
     $("#choosefile").keyup(function () {
     var value = $(this).val();
     $("p").text(value);
     }).keyup();
   </script>

buuuut it doesn't do anything, help would be appreciated.

Upvotes: 0

Views: 698

Answers (3)

Sibu
Sibu

Reputation: 4617

Maybe this will have you

<form  id="upload" enctype="multipart/form-data" action="upload_file.php" method="post">
   <input id="choosefile" type="file" name="file[]" onchange="makeFileList();" multiple/>
   <input type="submit" />
   </form>

<ul id="fileList"><li>No Files Selected</li></ul>

<script type="text/javascript">
        function makeFileList() {
            var input = document.getElementById("choosefile");
            var ul = document.getElementById("fileList");
            while (ul.hasChildNodes()) {
                ul.removeChild(ul.firstChild);
            }

            for (var i = 0; i < input.files.length; i++) {
                var li = document.createElement("li");
                li.innerHTML = input.files[i].name;
                ul.appendChild(li);
            }
            if(!ul.hasChildNodes()) {
                var li = document.createElement("li");
                li.innerHTML = 'No Files Selected';
                ul.appendChild(li);
            }
        }
    </script>

Upvotes: 1

Torrent Lee
Torrent Lee

Reputation: 845

on firefox and webkit

document.getElementById("choosefile").onchange = function  (  ) {
    var i = 0, files = this.files;
    for ( ;l = files.length; i < l; i += 1 ){
        console.log ( files[i].name );
    }
};

Upvotes: 0

silvenon
silvenon

Reputation: 2197

You can use HTML5's File API. Also, it's probably a good idea to check if the browser suppports it, with Modernizr.

Upvotes: 1

Related Questions