使用php上传ajax多个文件答案

【问题标题】：ajax multiple file upload with php使用php上传ajax多个文件
【发布时间】：2016-05-07 06:42:19
【问题描述】：

嘿，我正在将文件上传到选定的文件夹，现在我只能选择和上传一个文件。我知道如何在 php 中处理多个文件，但我不确定如何通过 AJAX 发送所有文件。感谢您提供的任何帮助

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";
}
?>

【问题讨论】：

这个document.getElementById("fileinfo")返回的元素是form吗？如果没有，应该是。
这里fileinfo 是表单的id 对吗？它应该。
Nick 你试过回答吗？
哇，谢谢大家，这太完美了！我现在在上计算课，但我回家后肯定会试试这个。我有一个 php 文件可以完美地使用它。

标签： php jquery ajax image file-upload

【解决方案1】：

您可以使用以下表单数据传递多个文件

HTML

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

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");                    
    }        
 })

现在在你的ajax调用中传递fd对象，它正在使用我的代码

【讨论】：

你有一个我可以在这个旁边运行的 php 示例吗？
@NickGarver 抱歉，我对 PHP 的了解不多，我可以用 Asp.net 做到这一点。
感谢您的代码，我已经在循环中实现了 ajax。那么如何在追加新文件之前清除表单数据？
@Samphors 我不明白你到底想做什么

【解决方案2】：

首先你必须使用带有输入标签的“multiple”属性。喜欢

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

然后在 Javascript 中的 onChange 函数 -

        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!")
        });

您的文件将被上传

【讨论】：