如何允许用户使用php和jquery从单个输入字段中选择多个文件？

Question

I have a rental listing site where users can create a page and show photos of their listing. I have created a form with multiple file input fields for the users to pick the files to upload as well as a submit button:

<form method="post" enctype="multipart/form-data">
    <input type="file" name="image_1" id="image_1" /> 
    <input type="file" name="image_2" id="image_2" /> 
    <input type="file" name="image_3" id="image_3" /> 
    <input type="submit" name="submit" value="Submit" />
</form>

After the user selects their images, I am running a function which resizes and uploads them:

function uploadAndResize($imageFile, $filename) {
    $folder = '../images/';
    $orig_w = 400;
    $filename = str_replace(' ', '_', $filename);

    list($width, $height) = getimagesize($imageFile);

    $src = imagecreatefromjpeg($imageFile);
    $orig_h = ($height / $width) * $orig_w;

    $tmp = imagecreatetruecolor($orig_w, $orig_h);
    imagecopyresampled($tmp, $src, 0, 0, 0, 0, $orig_w, $orig_h, $width, $height);
    imagejpeg($tmp, $folder.$filename, 100);

    imagedestroy($tmp);
    imagedestroy($src);
}

$imageFile_1 = $_FILES['image_1']['tmp_name'];
$filename_1 = basename( $_FILES['image_1']['name']);

$imageFile_2 = $_FILES['image_2']['tmp_name'];
$filename_2 = basename( $_FILES['image_2']['name']);

$imageFile_3 = $_FILES['image_3']['tmp_name'];
$filename_3 = basename( $_FILES['image_3']['name']);

uploadAndResize($imageFile_1,$filename_1);
uploadAndResize($imageFile_2,$filename_2);
uploadAndResize($imageFile_3,$filename_3);

The current setup I have works great to upload the photos, but I would like to replace the multiple file input fields with one single file input field that has the ability to select multiple files at one time. I do, however, want each file that gets selected to have a name attribute of "image_" combined with the next iteration, so that it will work well with the current script I am using. I also need it to call the function for as many files that were selected.

How do I allow users to select multiple files out of a single input field using php and jquery and still have it work with my current script?

Answer 1

using "mutiple" attribute in HTML form input elements.

for eg:

<input type="file" name="attacheDocument" multiple="multiple" />

returns array of files.

Answer 2

Refer to this great tutorial showing how to use a multi-file jquery plugin with php. Note that you will have to loop through the files in your php code (refer to the tutorial mentioned above.)

Answer 3

I recommend you http://valums.com/ajax-upload/

It is something difficult to make it works, but the results is awesome. Allow:

.- Multiple files
.- Progress bar

This plugin contains a php script that can be easily modified. Just test it in the page I showed you.

Answer 4

Use jquery multi file upload plugin. Its simple. Refer below link

http://www.fyneworks.com/jquery/multiple-file-upload/