AJAX到PHP图像上传

Question

I am attempting to upload multiple images from AJAX to PHP. Here's a run down of what I have so far.

HTML

<form>
    <input class="images" type="file">
</form>

There could be more than one input field if the user has multiple images to upload.

---

Javascript

var imageObject = GetAllFiles($('.images'));

function GetAllFiles(_selector)
{
     var newObject = {};

     for (var i = 0; i < $(_selector).length; i++)
     {
         var elem = $(_selector)[i];
         newObject[i] = $(elem).files;
     }

     return newObject;
 }

 $(document).on('click', '#submit', function() {
     var _data = JSON.stringify(imageObject);
     $.post('upload.php', { action: 'ImageUpload', data: _data }, function (e){
         alert(e);
     });
 )};

Send data via AJAX after conversion to JSON

---

PHP

if(isset($_POST['action']))
{
    $action = $_POST['action'];

    switch($action)
    {
        case 'ImageUpload' : ImageUpload($_POST['data']); break;
    } 
}

function ImageUpload($jsonData)
{
    $images = json_decode($jsonData);

    foreach($images as $image)
    {
        $directory = "../images/maschine/";
        $target_file = $directory . basename($_FILES[$image])['name'];

        if (move_uploaded_file($_FILES[$image]["tmp_name"], $target_file))
        {
            echo('Success');
        } else 
        {
            echo('Failure');
        }
    }
}

Answer 1

Add id in the file input first, and remember the enctype='multipart/form-data' in form.

<input class="images" name="file[]" type="file" multiple>

after that in the script

<script>  
$('YoursubmitbuttonclassorId').click(function() {
var filedata = document.getElementsByName("file"),
        formdata = false;
if (window.FormData) {
    formdata = new FormData();
}
var i = 0, len = filedata.files.length, img, reader, file;

for (; i < len; i++) {
    file = filedata.files[i];

    if (window.FileReader) {
        reader = new FileReader();
        reader.onloadend = function(e) {
            showUploadedItem(e.target.result, file.fileName);
        };
        reader.readAsDataURL(file);
    }
    if (formdata) {
        formdata.append("file", file);
    }
}
if (formdata) {
    $.ajax({
        url: "/path to upload/",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function(res) {

        },       
        error: function(res) {

         }       
         });
        }
  });
 </script>

In the php file

 <?php
  for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

     if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
     } else{
         echo "There was an error uploading the file, please try again! <br 
     />";
     }
   }
  ?>