表单数据通过ajax与文本字段一起上传多个文件 [英] form data upload multiple files through ajax together with text fields

问题描述

美好的一天，

我的表格中包含多个字段。此外，表单通过表单数据方法使用ajax提交到php文件。

I have a form wil multiple fields in it. Also, the form is being submitted through form data method using ajax to a php file.

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

The following is the javascript code submitting the form data.

$(".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('');
});

并且，以下是实际形式：

And, the following is the actual form:

<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代码以便能够处理多个文件上传？

This form and javascript work good as they are. However, I am trying to be able to upload multiple files to the php file using this one single type=file field attribute. As it is now, it can only take one file at a time. How do I adjust both the form and the javascript code to be able to handle multiple files uploads?

任何帮助都将不胜感激。

Any help would be greatly appreciated.

谢谢！

推荐答案

这是您可以访问的ajax，html和php全局。让我知道它是否适合你。

Here is ajax, html and php global you can access. Let me know if it works for you.

// 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中，您应该能够访问您的文件：

Now, in PHP, you should be able to access your files:

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

这篇关于表单数据通过ajax与文本字段一起上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！