6

I am developing a web application in which I have create a page for multiple file upload on a single browse not one file at a time.

User will be able to select multiple file on click on browse.

If some one have solution for this please welcome

Thanks!

1

2 Answers 2

9

For alternative solution, you can using HTML5 multiple-upload,

HTML

set attribute multiple for your input-file, check this link https://developer.mozilla.org/en-US/docs/Web/API/Input.multiple

<form id="form-upload">
    <input type="file" name="upload" id="upload" multiple>
</form>

JS

to upload file using juery, you can use form-data : https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

 $('#upload').bind("change", function(){
    var formData = new FormData($("#form-upload")[0]);
    //loop for add $_FILES["upload"+i] to formData
    for (var i = 0, len = document.getElementById('upload').files.length; i < len; i++) {
        formData.append("upload"+(i+1), document.getElementById('upload').files[i]);
    }

    //send formData to server-side
    $.ajax({
        url : "process_upload.php",
        type : 'post',
        data : formData,
        dataType : 'json',
        async : true,
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType
        error : function(request){
            console.log(request.responseText);
        },
        success : function(json){
            //place your code here
        }
    }); 
});  

SERVER-SIDE(ex:PHP)

//just print $_FILES
print_r($_FILES);
Sign up to request clarification or add additional context in comments.

Comments

3

Uploadify is a very good JQuery Plugin for file upload.

It's very easy to use too. From the docs:

$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : '/uploadify/uploadify.swf',
    'script'    : '/uploadify/uploadify.php',
    'cancelImg' : '/uploadify/cancel.png',
    'folder'    : '/uploads',
    'auto'      : true
  });
});

Then all you need in html is:

<input id="file_upload" name="file_upload" type="file" />

Obviously including the Uploadify scripts too.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.