使用ajax和php上传多个文件

Question

我想通过 ajax 上传多个文件，但我不知道如何在 PHP 中获取文件。 谁能帮我？ 谢谢！ 这是代码：

HTML：

<form  enctype="multipart/form-data" method="POST">
    <input type="file" id="file" multiple="multiple" name="file"/>
</form>
<div id="info"></div>
<div id="preview"></div>

JavaScript：

$(document).ready(function(){
    $("#file").change(function(){

        var src=$("#file").val();
        if(src!="")
        {
            formdata= new FormData();  // initialize formdata
            var numfiles=this.files.length;  // number of files
            var i, file, progress, size;
            for(i=0;i<numfiles;i++)
            {
                file = this.files[i];
                size = this.files[i].size;
                name = this.files[i].name;
                if (!!file.type.match(/image.*/))  // Verify image file or not
                {
                    if((Math.round(size))<=(1024*1024)) //Limited size 1 MB
                    {
                        var reader = new FileReader();  // initialize filereader
                        reader.readAsDataURL(file);  // read image file to display before upload
                        $("#preview").show();
                        $('#preview').html("");
                        reader.onloadend = function(e){
                            var image = $('<img>').attr('src',e.target.result);
                            $(image).appendTo('#preview');
                        };
                        formdata.append("file[]", file);  // adding file to formdata
                        console.log(formdata);
                        if(i==(numfiles-1))
                        {
                            $("#info").html("wait a moment to complete upload");
                            $.ajax({

                                url: _url + "?module=ProductManagement&action=multiplePhotoUpload",
                                type: "POST",
                                data: formdata,
                                processData: false,
                                contentType: false,
                                success: function(res){
                                    if(res!="0")
                                        $("#info").html("Successfully Uploaded");
                                    else
                                        $("#info").html("Error in upload. Retry");
                                }
                            });
                        }
                    }
                    else
                    {
                        $("#info").html(name+"Size limit exceeded");
                        $("#preview").hide();
                        return;
                    }
                }
                else
                {
                    $("#info").html(name+"Not image file");
                    $("#preview").hide();
                    return;
                }
            }
        }
        else
        {
            $("#info").html("Select an image file");
            $("#preview").hide();
            return;
        }
        return false;
    });
});

在 PHP 中，我将 $_POST 和 $_FILES 作为一个空数组； 只有当我做 file_get_contents("php://input"); 我得到类似的东西

-----------------------------89254151319921744961145854436
Content-Disposition: form-data; name="file[]"; filename="dasha.png"
Content-Type: image/png

PNG

���
IHDR��Ò��¾���gǺ¨���    pHYs��������tIMEÞ/§ýZ�� �IDATxÚìw`EÆgv¯¥B-4 ½Ò»tBU©)"¶+*"( E¥J7ôÞ;Ò¤W©¡&puwçûce³WR¸ èóûrw»³ï}fö

但我不知道如何从这里开始。

我正在使用 Jquery 1.3.2 也许这是问题所在？

谢谢！

Answer 1

您可以使用ajax form上传插件

这就是我几天前发现的并以这种方式实现的
参考：链接

你的 PHP 代码可以是这样的

uploadimage.php

    $response = array();
    foreach ($_FILES as $file) {
        /* Function for moving file to a location and get it's URL */
        $response[] = FileUploader::uploadImage($file);
    }
    echo json_encode($response);

JS Code

      options = {
                beforeSend: function()
                {
                    // Do some image loading
                },
                uploadProgress: function(event, position, total, percentComplete)
                {
                    // Do some upload progresss
                },
                success: function()
                {
                    // After Success
                },
                complete: function(response)
                {
                    // Stop Loading
                },
                error: function()
                {

                }

            };

            $("#form").ajaxForm(options);

现在您可以调用任何 AJAX 并提交您的表单。

Answer 2

对答案感到抱歉，但我还不能添加评论。

我建议不要在 javascript 中检查文件类型，它很容易被绕过。 我更喜欢在 PHP 中检查文件，然后再允许它上传到服务器。

例如

这个答案取自另一个问题（ PHP 上传文件类型检查），给你一个想法：

https://stackoverflow.com/a/6755263/1720515

<?php
$allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
$detectedType = exif_imagetype($_FILES['fupload']['tmp_name']);
$error = !in_array($detectedType, $allowedTypes);
?>

您可以在此处阅读有关exif_imagetype()函数的文档。

你能发布你的PHP代码吗？ 如果我有什么要补充的，我会更新我的答案。

更新：

注意： 'multiple' 属性 ( multiple="multiple" ) 不能与<input type='file' />字段一起使用。 表单中必须使用多个<input type='file' />字段，每个字段命名相同，并在末尾添加[]以确保每个字段的内容都添加到数组中，而不是表格发布时相互覆盖。

例如

<form  enctype="multipart/form-data" method="POST">
  <input type="file" id="file_0" name="img_file[]" />
  <input type="file" id="file_1" name="img_file[]" />
  <input type="file" id="file_2" name="img_file[]" />
</form>

提交表单时，任何<input type='file' />字段的内容都将添加到 PHP $_FILES数组中。 然后可以使用$_FILES['img_file'][*parameter*][*i*]引用这些文件，其中“ i ”是与文件输入相关联的键，“ paramter ”是与每个相关联的多个参数之一$_FILES数组的元素：

例如

• $_FILES['img_file']['tmp_name'][0] - 当提交表单时，在服务器上创建一个临时文件，该元素包含为该文件生成的 'tmp_name'。
• $_FILES['img_file']['name'][0] - 包含文件名，包括文件扩展名。
• $_FILES['img_file']['size'][0] - 包含文件大小。

$_FILES['img_file']['tmp_name'][0]可用于在文件永久上传到服务器之前预览文件（查看您的代码，这是您想要包含的功能）

然后必须使用 PHP 的move_uploaded_file()函数将文件移动到服务器上的永久位置。

下面是一些示例代码：

<?php
  if (!empty($_FILES)) {
    foreach ($_FILES['img_file']['tmp_name'] as $file_key => $file_val) {
      /*
        ...perform checks on file here

        e.g. Check file size is within your desired limits,
             Check file type is an image before proceeding, etc.
      */

      $permanent_filename = $_FILES['img_file']['name'][$file_key];

      if (@move_uploaded_file($file_val, 'upload_dir/' . $permanent_filename)) {
        // Successful upload
      } else {
        // Catch any errors 
      }
    }
  }
?>

以下是一些可能有助于您理解的链接：

• http://www.w3schools.com/php/php_file_upload.asp
• http://php.net/manual/en/features.file-upload.multiple.php
• http://www.sitepoint.com/handle-file-uploads-php/

另外，关于保护文件上传漏洞的理论的一些额外阅读：

• http://en.wikibooks.org/wiki/Web_Application_Security_Guide/File_upload_vulnerabilities

Answer 3

你应该考虑下面的代码

HTML

   <input type="file" name="fileUpload" multiple>

AJAX

• 首先，您必须像这样获取在“输入类型文件”中选择的所有文件。

   var file_data = $('input[type="file"]')[0].files; var form_data = new FormData(); for(var i=0;i<file_data.length;i++) { form_data.append(file_data[i]['name'], file_data[i]); }

• 那么您的所有数据都在 formData 对象中，现在您可以像这样将其发送到服务器（php）。

   $.ajax({ url: 'upload.php', //your php action page name dataType: 'json', contentType: false, processData: false, data: form_data, type: 'post', success: function (result) { // code you want to execute on success of ajax request }, error: function (result) { //code you want to execute on failure of ajax request } });

  PHP

   <?php foreach($_FILES as $key=>$value) { move_uploaded_file($_FILES[$key]['tmp_name'], 'uploads/' .$_FILES[$key]['name']); }