I was looking for a similar functionality some days back and came across a good tutorial on tutorialzine. Here is an working example. Complete tutorial can be found here. Simple form to hold the file upload dialogue: <form id=”upload” method=”post” action=”upload.php” enctype=”multipart/form-data”> <input type=”file” name=”uploadctl” multiple /> <ul id=”fileList”> <!– The file list will be … Read more
Solved. Fiddle: http://jsfiddle.net/BAQtG/29/ And js code $(document).ready(function(){ var filesList = [], paramNames = [], elem = $(“form”); file_upload = elem.fileupload({ formData:{extra:1}, autoUpload: false, fileInput: $(“input:file”), }).on(“fileuploadadd”, function(e, data){ filesList.push(data.files[0]); paramNames.push(e.delegatedEvent.target.name); }); $(“button”).click(function(e){ e.preventDefault(); file_upload.fileupload(‘send’, {files:filesList, paramName: paramNames}); }) })
Finally I have found the solution by using the following code: $(‘body’).on(‘click’, ‘#upload’, function(e){ e.preventDefault(); var formData = new FormData($(this).parents(‘form’)[0]); $.ajax({ url: ‘upload.php’, type: ‘POST’, xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, success: function (data) { alert(“Data Uploaded: “+data); }, data: formData, cache: false, contentType: false, processData: false }); return false; });