表单数据通过ajax连同文本字段一起上传多个文件

Question

大家好，

我有一个表单，里面有多个字段。此外，表单正在通过使用 ajax 的表单数据方法提交到 php 文件。

以下是提交表单数据的javascript代码。

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

        $.ajax({
        url: 'post_reply.php',
        type: 'POST',
        contentType:false,
        processData: false,
        data: function(){
            var data = new FormData();
            data.append('image',$('#picture').get(0).files[0]);
            data.append('body' , $('#body').val());
            data.append('uid', $('#uid').val());
            return data;
        }(),
            success: function(result) {
            alert(result);
            },
        error: function(xhr, result, errorThrown){
            alert('Request failed.');
        }
        });
        $('#picture').val('');
$('#body').val('');
});

而且，下面是实际的形式：

<textarea name=body id=body class=texarea placeholder='type your message here'></textarea>
<input type=file name=image id=picture >
<input name=update value=Send type=submit class=update id=update  />

这种形式和 javascript 可以正常工作。但是，我试图能够使用这个单一的 type=file 字段属性将多个文件上传到 php 文件。就像现在一样，一次只能处理一个文件。如何调整表单和 javascript 代码以处理多个文件上传？

任何帮助将不胜感激。

谢谢！

Answer 1

这里是你可以访问的ajax、html和php global。让我知道它是否适合你。

// Updated part
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

// Full Ajax request
$(".update").click(function(e) {
    // Stops the form from reloading
    e.preventDefault();

        $.ajax({
        url: 'post_reply.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());
            data.append('uid', $('#uid').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">
  <input id="file" name="file[]" type="file"  multiple/>
  <input class="update" type="submit" />
</form>

现在，在 PHP 中，您应该可以访问您的文件了：

// i.e.    
$_FILES['file-0']

Answer 2

这是另一种方式。

假设你的 HTML 是这样的：

<form id="theform">
    <textarea name="body" id="body" class="texarea" placeholder="type your message here"></textarea>
    <!-- note the use of [] and multiple -->
    <input type="file" name="image[]" id="picture" multiple>
    <input name="update" value="Send" type="submit" class="update" id="update">
</form>

你可以这样做

$("#theform").submit(function(e){
    // prevent the form from submitting
    e.preventDefault();
    $.ajax({
        url: 'post_reply.php',
        type: 'POST',
        contentType:false,
        processData: false,
        // pass the form in the FormData constructor to send all the data inside the form
        data: new FormData(this),
        success: function(result) {
            alert(result);
        },
        error: function(xhr, result, errorThrown){
            alert('Request failed.');
        }
    });
    $('#picture').val('');
    $('#body').val('');
});

因为我们使用了[]，所以您将在 PHP 中以数组的形式访问文件。

<?php
print_r($_POST);
print_r($_FILES['image']); // should be an array i.e. $_FILES['image'][0] is 1st image, $_FILES['image'][1] is the 2nd, etc
?>

更多信息：

• FormData constructor
• Multiple file input