douliao8318
2016-01-29 13:45
浏览 115

ajax用php上传多个文件

Hey I am uploading files to a chosen folder and right now I have the ability to select and upload just one file. I know how to handle multiple files in php but I am not sure how to send all of the files over through AJAX. Thanks for any help you can offer

AJAX

 function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "sound");
            fd.append('label', document.getElementById('selected_folder').value);
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              enctype: 'multipart/form-data',
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
                alert("upload success!")
            });
            return false;
        }

PHP

<?php
if ($_POST["label"]) {
    $subfolder = $_POST["label"];
}


$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < (10000*1024))
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
         // echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";



        if (file_exists("uploaded/".$subfolder .'/'. $filename)) {
            //already exists 
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploaded/".$subfolder .'/'. $filename);
            // "Stored in: " . "uploaded/".$subfolder .'/'. $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doubo1711 2016-01-29 13:53
    已采纳

    You can pass multiple files using form data as below

    HTML

    <input id="fuDocument" type="file" accept="image/*" multiple="multiple" />
    

    JS

    var fd = new FormData();
    var files = $("#fuDocument").get(0).files; // this is my file input in which We can select multiple files.
    fd.append("label", "sound");
    
    for (var i = 0; i < files.length; i++) {
        fd.append("UploadedImage" + i, files[i]);
    }
    
    $.ajax({
        type: "POST",
        url: 'Url',
        contentType: false,
        processData: false,
        data: fd,
        success: function (e) {
            alert("success");                    
        }        
     })
    

    Now pass fd object in you ajax call it is working with my code

    已采纳该答案
    打赏 评论
  • doutong1890 2016-01-29 13:56

    First you have to use "multiple" attribute with input tag. Like

    <input id="fileUpload" type="file" accept="image/*" name="my_file[]" multiple />
    

    Then in Javascript onChange function -

            var data = new FormData();
            var imgData = document.getElementById('fileUpload'); 
    
            for (var i = 0; i < imgData.files.length; i++) {                                 
                 data.append('my_file[]', imgData.files[i], imgData.files[i].name);
            } 
    
           //now call ajax
           $.ajax({
              url: "upload.php",
              type: "POST",
              data: data,
              enctype: 'multipart/form-data',
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
                alert("upload success!")
            });
    

    And your file will be uploaded

    打赏 评论