javascript - 使用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

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

我建议不要在 javascript 中检查文件类型，它很容易被绕过。我更喜欢在允许将文件上传到服务器之前仔细检查 PHP 中的文件。

例如

这个答案取自另一个问题(uploaded file type check by 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() 上的文档函数 here 。

您可以发布您的 PHP 代码吗？如果我有任何要添加的内容，我会更新我的答案。

更新:

注意:“multiple”属性 ( multiple="multiple" ) 不能与 <input type='file' /> 一起使用 field 。多个<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