jQuery multiple file upload from scratch

jquery multiple file upload with progress bar
jquery file upload
html multiple file upload javascript
bootstrap multiple file upload
how to send multiple files using formdata(jquery ajax)
html multiple file upload example
multiple file upload using jquery ajax
drag and drop multiple file upload, bootstrap

I am trying to implement a multiple image uploader in jQuery using the new HTML5 multiple attribute.

My code is the following:

<form action="file-upload.php" method="post" enctype="multipart/form-data">
    <input name="userfiles" type="file" multiple="multiple">
</form>

The JS code I am using is taken from a discussion here on SO, and is the following:

 $('input[name=userfiles]').change(function() {
    var names = [];
    for (var i = 0; i < $(this).get(0).files.length; ++i) {
        names.push($(this).get(0).files[i].name);
        console.log(names[i]);
    }
 });

With this I am able to print on the console the file names I select, but what if I need to get the exact val() of those files? I tried replacing .name with .val(), but I get an error.

I think I would need a fakepath of every single file if I want to be able to work with them with $.ajax. If this is correct, how can I cycle though them in the PHP file where the get request is sent, in order to upload them?

You can make use of HTML5 FormData API. https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

var form = new FormData();
for (var i = 0; i < $(this).get(0).files.length; ++i) {
    form.append('userfiles[]', $(this).get(0).files[i]);
}

// send form data with ajax
$.ajax({
    url: 'url',
    type: "POST",
    data: form
});

Or if you cannot use FormData there is a way to send it natively: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

Top 17 Best Free jQuery File Upload Scripts For Multiple File Upload , jQuery Ajax File Uploader is a great example of how simple (yet include the ability to retry failed file uploads, not from the beginning, but from  Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using PHP, and MySQL.

You don't need to manipulate file path, in your ajax call just use the File and put it into a new FormData

Something like that:

 $.ajax({
'type':'POST',
'data': (new FormData()).append('file', $(this).get(0).files[i])

See HTML5 multiple file upload: upload one by one through AJAX

How to upload Multiple Image files with jQuery AJAX and PHP , You will take just 3 minutes to read and understand this jQuery file Upload tutorial that uses AJAX and does not perform page reloading when  Follow the below three steps and upload multiple images with preview and delete using the jQuery plugin: 1. Create Html File. First of all, we need to create one HTML file and put the below code into your file. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Image Upload with Preview and Delete jQuery Plugin</title> </head> <body> <div id="drag-drop-area"></div> </body> </html> 2. Include jQuery and CDN libraries

If you use jquery-file-upload plugin you can use this

<input class="fileupload" type="file" name="file">

and

$('.fileupload').each(function () {
  $(this).fileupload({
  //your code goes here
})

How to Upload Multiple files using jQuery AJAX in ASP.NET MVC, File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports  Our main objective is to upload multiple files at once and save them in a local folder. Also, we want to show a progress bar until the uploading is complete with a message to prompt the user that the files have been uploaded successfully. Method To do it, we will use an ASP.NET generic HTTP handler to get the files and save them to the local folder.

blueimp/jQuery-File-Upload: File Upload widget with , So, you need to get files from your user's browser to your server. Not just one file though. A whole bunch. A batch even. And each file needs to  jQuery File Upload Demo. File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

How to upload single or multiple files the easy way with FormData, well, the beginning still didn't show up so you'll have to trust I didn't misscode it. Greg. Has anyone found code that will correctly detect the  First we have to create an Asp Mvc project in visual studio. To do that, Open Visual Studio -> New Project -> A new dialog window will appear -> In left pane select C# ->select Web -> Select "ASP.NET MVC 4 Application" name your project and click ok.

How to drag and drop multiple files at once, File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports  jQuery html5 file uploader plugin View on GitHub Download .zip Download .tar.gz pekeUpload What is pekeUpload? is a jQuery plugin that allows you to easily add multiple or single file upload functionality to your website. This plugin uses html5 only. Some Features include: Theming (Twitter Bootstrap ready) Set File size limit; Set File extensions restrictions

Comments
  • Thanks. Do I need to change the input name from userfiles to userfiles[]?
  • Yes, because you're using multiple option
  • I have difficulties to select the input by name then, if I use $('input[name=userfiles[]]') I receive an error because of the []
  • Nevermind, managed to do it with $('input[name=userfiles\\[\\]]'). I will let you know if I'll do it :)
  • Wouldn't it be better to send the whole form via data as @insanebits suggested?
  • I don't know why you need to loop on each of your file. If you want to add a progressbar and send files one by one (like gmail attachments) it is a solution. If you don't care, just send them all in once.
  • My target would be, in the PHP file, to do: if (isset($_FILES['userfiles'])) and so on. I don't need the progress bar to appear, but will I be able to do this if I send the whole form? Because right now, it doesn't even seems to enter the if statement.
  • (Also, in the ajax call I had to disable the processData with processData: false)
  • dump the content of $_FILES or do network capture to see what it is send. My example will upload in $_FILES['file']