2016-01-29 164 views
3

嘿,我正在上传文件到一个选定的文件夹,现在我有能力选择并上传一个文件。我知道如何处理php中的多个文件,但我不知道如何通过AJAX发送所有文件。感谢您的帮助,您可以提供ajax使用php上传多个文件

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

是元素从这个'的document.getElementById( “FileInfo的”)返回''一个形式'?如果不是,应该是。 –

+0

这里'fileinfo'是表单的权利?这应该。 –

+0

尼克你用答案尝试? –

回答

2

你可以通过使用表单数据的多个文件,如下

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

现在通过fd对象在你AJAX调用它与我的代码

+0

didi你有一个PHP的例子,我可以在旁边运行? –

+0

@NickGarver对不起,但我没有太多的PHP知识我可以用Asp.net做到这一点。 –

+0

感谢您的代码,我已经在循环内实现了ajax。那么如何在追加新文件之前清除表单数据? – Samphors

2

首先的工作,你必须使用与输入标签“多”属性。 像

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

和您的文件将被上传