Multi file upload with PHP/Javascript and no flash

Question 1

I'm trying to make a webpage that allows the uploading of multiple files at the same times. I will limit the file extensions to the most common images like JPG, JPEG, PNG and GIF.

I've done some research on this and everywhere I look it's flash this and flash that.

I don't want to use flash really. Especially with Flash 10, which disables the most common used method to enable multifile upload.

What I'm looking for is a way to keep creating more and more input fields, each with a browse button and then with one final upload button at the bottom of the form. Creating the new input fields with a Javascript is nog big deal really.

So I'm wondering how this works. Do I need to give all file-input fields the same name atribute so I can use 1 piece of PHP code to solve this? Or Is there some way for PHP to detect howmany files have been sumbitted and simply put the code for parsing a file inside a for-loop?

Question 2

Here is the algorithm:

You add the new file input fields to your form. Each of this field MUST have a unique name. Then, on the server side, you loop through the $_FILES array looking how many files have been uploaded and handling them.

Question 3

The contributer is correct. You can't rely merely on MIME type checking to truly validate a file. It's only useful for quick lookups. For instance, on the client side, you can check the MIME type of a file before it is sent to the server, just in case the user chose the wrong file type, saving time and bandwidth. Apologies for the liberal use of commas!

Question 4

The below just uses the mime types to validate a file, then checks the size of both. For a list of most mime types see here or google.

function allowed_file(){

//Add the allowed mime-type files to an 'allowed' array 
 $allowed = array('application/doc', 'application/pdf', 'another/type');

//Check uploaded file type is in the above array (therefore valid)  
    if(in_array($_FILES['resume']['type'], $allowed) AND in_array($_FILES['reference']['type'], $allowed)){

   //If filetypes allowed types are found, continue to check filesize:

  if($_FILES["resume"]["size"] < 400000 AND $_FILES["reference"]["size"] < 400000 ){

    //if both files are below given size limit, allow upload
    //Begin filemove here....

    }

    }

}

Question 5

I'm not sure if file upload works with filereaders, but there is a different way to make it work:

var formData = new FormData($(".file_upload_form")[0]);
$.ajax({
    url: "upload_file.php", // server script to process data (POST !!!)
    type: 'POST',
    xhr: function() { // custom xhr
        myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) { // check if upload property exists
            // for handling the progress of the upload
            myXhr.upload.addEventListener('progress', progressHandlingFunction, false); 
        }
        return myXhr;
    },
    success: function(result) {
        console.log($.ajaxSettings.xhr().upload);
        alert(result);
    },
    // Form data
    data: formData,
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: "application/octet-stream", // Helps recognize data as bytes
    processData: false
});

function progressHandlingFunction(e) {
    if (e.lengthComputable) {
        $("#progress").text(e.loaded + " / " + e.total);
    }
}

This way you send the data to the PHP file and you can use $_FILES to process it. Unfortunately, this does not work in IE as far as I know. There might be plugins available that make this possible in IE, but I don't know any of them.

Multi file upload with PHP/Javascript and no flash

Answers

php,javascript,file-upload