ajax用php上传多个文件 [英] ajax multiple file upload with php

问题描述

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

AJAX
$ b

 函数submitForm ）{
 console.log（submit event）; 
 var fd = new FormData（document.getElementById（fileinfo））; 
 fd.append（label，sound）; 
 fd.append（'label'，document.getElementById（'selected_folder'）。value）; $ b $ .ajax（{
 url：upload.php，
 type：POST，
 data：fd，
 enctype：'multipart / form-数据'，
 processData：false，//告诉jQuery不处理数据
 contentType：false //告诉jQuery不要设置contentType 
}）。done（function（data）{
 console.log（PHP Output：）; 
 console.log（data）; 
 alert（upload success！）
}）; 
返回false; 
 
 $ / code> 

PHP

<$ p （$ _POST [label]）{
$ subfolder = $ _POST [label]; $ p $ <？php
if


$ b $ allowedExts = array（gif，jpeg，jpg，png）;
$ temp = explode（。，$ _FILES [file] [name]）;
$ extension = end（$ temp）;
if（（（$ _FILES [file] [type] ==image / gif）
||（$ _FILES [file] [type] ==图片/ 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返回码：。 $ _FILES [file] [error]。 <峰; br> 中;
} else {
$ filename = $ _FILES [file] [name];
回显上传：。 $ _FILES [file] [name]。 <峰; br> 中;
回显类型：。 $ _FILES [file] [type]。 <峰; br> 中;
回声大小：。 （$ _FILES [file] [size] / 1024）。 kB< br>;
回显临时文件：。 $ _FILES [file] [tmp_name]。 <峰; br> 中;


$ b if（file_exists（uploaded /\".$ subfolder。'/'。$ filename））{
// already exists
} else {
move_uploaded_file（$ _ FILES [file] [tmp_name]，
uploaded /\".$ subfolder。'/'。$ filename）;
//存储在：。 uploaded /\".$子文件夹。/。 $文件名;


} else {
echoInvalid file;
}
？>





解决方案

/ b>

HTML



 <输入ID =fuDocumenttype =fileaccept =image / *multiple =multiple/> 
  

JS


  var fd = new FormData（）; 
 var files = $（＃fuDocument）。get（0）.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）; 
} 
}）
  

现在传递 fd 对象在ajax中调用它与我的代码


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

解决方案

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

这篇关于ajax用php上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！