使用ajax和php多个文件上传

时间:2014-09-11 10:19:54

标签: javascript php jquery ajax

我想通过ajax uplod多个文件,但我无法弄清楚如何在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也许这就是问题?

谢谢!

3 个答案:

答案 0 :(得分:1)

您可以使用ajax form上传插件
这就是我几天前发现并以这种方式实施的 参考:LINK

你的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并提交表单。

答案 1 :(得分:1)

对此答案感到抱歉,但我暂时无法添加评论。

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

e.g。

这个答案取自另一个问题(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")不能与<input type='file' />字段一起使用。必须在表单中使用多个<input type='file' />字段,将每个字段命名为添加到末尾的[],以确保每个字段的内容都添加到数组中,并且不会覆盖表格发布时彼此相对。

e.g。

<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 ”是与文件输入关联的关键字,“参数”是多个与之关联的参数之一与$_FILES数组的每个元素:

e.g。

  • $_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 
      }
    }
  }
?>

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

另外,有关保护文件上传漏洞的理论的一些额外阅读:

答案 2 :(得分:0)

您应该考虑以下代码

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对象中,现在您可以像这样将其发送到server(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']);
    
    }