javascript - 将不同的文件类型发布到 php 文件上的不同 php block

Question

我在 php 中有以下代码:

 if (isset($_FILES)) {
     foreach($_FILES as $index => $picture)
     {
     echo $_FILES;
     }
  }

用于发布表单数据的 JavaScript 代码:

$(".update").click(function(){

    $.ajax({
    url: 'submit.php',
    type: 'POST',
    contentType:false,
    processData: false,
    data: function(){
        var data = new FormData();
        jQuery.each(jQuery('#file')[0].files, function(i, file) {
            data.append('file-'+i, file);
        });
        data.append('body' , $('#body').val());
        return data;
        }(),
        success: function(result) {
        alert(result);
        },
        error: function(xhr, result, errorThrown){
        alert('Request failed.');
       }
       });
       $('#picture').val('');
       $('#body').val('');
      });

html 表单:

<form enctype="multipart/form-data" method="post" id="myform">
<textarea name="body" id="body" class="texarea" placeholder="type here">
</textarea>

<label for="photo" class="custom-file-upload">
<i class="fa fa-picture-o"style="font-size:20px;color:pirple;"></i>
</label>
<input id="file" name="picture[]" type="file"  multiple/>
//this is my part of interest now
<label for="docs" class="docsmsg">
<i class="fa fa-file" style="font-size:20px;color:red;"></i>
</label>
<input id="docs" name="document[]" type="file"  multiple/>
</form>

PHP 代码不会从表单接收具有特定名称属性的文件，而是接收任何文件，无论是照片、文档还是其他名称。如果(isset($_FILES))

然而，这不是我想要的。在我的表单上，我想要两个甚至三个文件输入选项，就像上面的一个一样，只不过另一个仅用于上传文档，最后一个仅用于上传视频...请注意我把注释放在哪里...说……“这是我感兴趣的部分。”这是我要添加的新内容。

当前的选项仅上传照片...但我对三个文件输入选项感兴趣...一个用于照片、视频、文档。

最初我尝试使用以下 php 代码来区分不同的内容:

  if (isset($_FILES[file])) {
  //do something
  }

但这没有用。它没有做“某事”。直到我删除方括号末尾的[文件]描述，然后它才开始执行上面指示的“某事”。

我的问题实际上是，基于我想要实现的目标......分别为不同类型的文件提供多个多个文件输入，我如何允许 php 实际确定文件是哪个表单输入字段正在附加或我想要处理哪些/哪些文件类型。正如现在的代码，文件附加到哪个输入字段并不重要，但最后，它们都会到达 if (isset($_FILES)) 指令......

Answer 1

你好_伙计，

首先我在这里看到一个错误if (isset($_FILES[file]))这永远不会起作用，因为你需要像这样的引号 if (isset($_FILES['file'])) 。然后，当您发布表单时，数据将带有 name属性而不是 id ，所以如果您有这个 HTML:

<input id="file" name="picture[]" type="file"  multiple/>
<input id="docs" name="document[]" type="file"  multiple/>

在 PHP你会这样做:

if(isset($_FILES['picture'])){
    foreach($_FILES['picture'] as $fileData){ 
        // process your picture files here
    }
}

if(isset($_FILES['document'])){
    foreach($_FILES['document'] as $fileData){ 
        // process your document files here
    }
}

和不:

if(isset($_FILES['file'])){
}

if(isset($_FILES['docs'])){
}

我希望你明白这一点。祝你好运:)

注意

请记住，在检查 type 时，您应该手动验证文件类型。属性(property)。当您选择了多个文件时，您将收到以下结构的数据:

[picture] => Array
(
    [name] => Array
        (
            [0] => icon.ico
            [1] => some-png.png
        )

    [type] => Array
        (
            [0] => image/x-icon
            [1] => image/png
        )

    [tmp_name] => Array
        (
            [0] => \tmp\php3F40.tmp
            [1] => \tmp\php3F41.tmp
        )

    [error] => Array
        (
            [0] => 0
            [1] => 0
        )

    [size] => Array
        (
            [0] => 370070
            [1] => 370070
        )

)

所以你可以做这样的事情，例如:

$imgsAllowedTypes = array('image/jpeg', 'image/png', 'image/gif', 'image/bmp');

if(isset($_FILES['picture'])){
    // This is an array of uploaded files 
    $pictures = $_FILES['picture'];
    $fileNames = $pictures['name'];
    foreach($fileNames as $k => $fileName){
        // Here you can access other properties of the file by index - $k
        $fileType = $pictures['type'][$k];
        $tmpName = $pictures['tmp_name'][$k];
        $error = $pictures['error'][$k];
        $size = $pictures['size'][$k];
        if(!in_array($fileType, $imgsAllowedTypes)){
            // Invalid image 
            continue;
        }

        // upload 
        move_uploaded_file($tmpName, 'path/where/you/save/files/filename.extension');
    }
}

编辑

好吧，现在感谢您的评论，我可以承认我没有检查您的 javascript代码，当我没有这样做时，我可以说这是错误的，如果您希望我编写的代码片段起作用，您应该具有以下 javascript:

$.ajax({
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    data: function () {
        // Note the change is here
        // You should have the same names set in the FormData object
        // as you are waiting in the PHP script
        var data = new FormData();
        $.each($('#file')[0].files, function (i, file) {
            data.append('picture[' + i + ']', file);
        });

        $.each($('#docs')[0].files, function (i, file) {
            data.append('document[' + i + ']', file);
        });
        return data;
    }(),
    success: function (result) {
        alert(result);
    },
    error: function (xhr, result, errorThrown) {
        alert('Request failed.');
    }
});

阅读评论了解详情