[RESOLVED]Upload multiple files

Hello,

I use FileUpload to upload files. Everything works OK. But I have to select the files one bye one to upload many files.

How can I select many files at the same time?

<form method="post" enctype="multipart/form-data">
    <fieldset class="no-legend">
        <legend>Add pictures</legend>
        @FileUpload.GetHtml(addText: "Add more", uploadText: "Upload", includeFormTag: false)
        <input type="submit" value="Upload" title="Upload images" />
    </fieldset>
</form>

You may want to ensure that you set the "allowMoreFilesToBeUploaded" attribute set to true :

@FileUpload.GetHtml(addText: "Add more", uploadText: "Upload", includeFormTag: false, allowMoreFilesToBeUploaded: true)

I’m not terribly familiar with the FileUpload helper, however you might want to look into

this particular article on handling multiple file uploads using it
. Additionally, if you don’t explicitly need to use the FileUpload helper, you could just use a file input element with the multiple attribute set on it :

<form method="post" enctype="multipart/form-data">
    <fieldset class="no-legend">
        <legend>Add pictures</legend>
        <input type='file' multiple='multiple' />
        <input type="submit" value="Upload" title="Upload images" />
    </fieldset>
</form>

This will allow you to select and upload multiple files at the same time as long as the browser supports it.

Hello Rion,

The code 

<input type='file' multiple='multiple' />

works fine.

But it shows only how many files are selected. Is it possible to show the selected file names?

You could consider writing a very simple event listener to output the names of the files as they are uploaded as mentioned in
this Stack Overflow discussion :

<input type="file" id="files" multiple />
<pre id="filelist" style="display:none;"></pre>
<script type='text/javascript'>
    document.getElementById('files').addEventListener('change', function(e) {
        var list = document.getElementById('filelist');
        list.innerHTML = '';
        for (var i=0;i<this.files.length;i++) {
            list.innerHTML += (i+1) + '. ' + this.files[i].name + 'n';
        }
        if (list.innerHTML == '') list.style.display = 'none';
        else list.style.display = 'block';
    });
</script>

You can see this in a working example here, which yields the following after uploading a few files :

thanx a lot

Leave a Reply