使用jQuery和PHP进行多文件上传。创建最简化的示例

我想使用jQuery创建一个多文件文件上传程序

下面是我正在使用的代码。我只是想用jQuery（和文件API）和PHP抽象出一次上传多个文件的要点。如果有人有一个简单的答案，请随意分享或提供建议

然而，现在这段代码用于上传图像（有点）。有一些问题：

即使选择了多个文件，也只有一个文件上载到该目录

表单在提交时更改页面

下面是我正在使用的js/jquery：

function html5Upload($form) {
    file = $form.data('input');
    if (file) {
        var fd = new FormData();
        fd.append($form.find(selector).attr('name'), file);
        //get other form input and append to formData
        $form.find(':input').each(function () {
            if (this.type != 'file') {
                fd.append($(this).attr('name'), $(this).val());
            }
        });

        //Upload using jQuery AJAX
        jqxhr = $.ajax({
            url: $form.attr('action'),
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function () {
                alert("Images Uploaded!");
            }
        });
    }

    $form.remove();
}


$('form').submit(function (event) {
    event.preventDefault();
    html5Upload($('form.mupload'));
    return false;
});

HTML

<form class="mupload" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="userfile" class="fileUpload" multiple>

    <button type="submit">Upload</button>
</form>

上传

PHP

/*
Easy PHP Upload - version 2.32
A easy to use class for your (multiple) file uploads

Copyright (c) 2004 - 2010, Olaf Lederer
*/
include("easy_upload/upload_class.php");

$upload = new file_upload();

$upload->upload_dir = 'uploads/';
$upload->extensions = array('.png', '.jpg', '.zip', '.pdf'); // specify the allowed extensions here
$upload->rename_file = true;


if(!empty($_FILES)) {
    $upload->the_temp_file = $_FILES['userfile']['tmp_name'];
    $upload->the_file = $_FILES['userfile']['name'];
    $upload->http_error = $_FILES['userfile']['error'];
    $upload->do_filename_check = 'y'; // use this boolean to check for a valid filename
    if ($upload->upload()){

        echo '<div id="status">success</div>';
        echo '<div id="message">'. $upload->file_copy .' Successfully Uploaded</div>';
        //return the upload file
        echo '<div id="uploadedfile">'. $upload->file_copy .'</div>';

    } else {

        echo '<div id="status">failed</div>';
        echo '<div id="message">'. $upload->show_error_string() .'</div>';

    }
}

/*
简易PHP上传-版本2.32
用于（多个）文件上载的易于使用的类
版权所有（c）2004-2010，Olaf Lederer
*/
包括（“easy_upload/upload_class.php”）；
$upload=新文件_upload（）；
$upload->upload_dir='uploads/'；
$upload->extensions=array（'.png'、'.jpg'、'.zip'、'.pdf'）；//在此处指定允许的扩展名
$upload->rename_file=true；
如果（！空（$\u文件））{
$upload->the_temp_file=$_FILES['userfile']['tmp_name']；
$upload->the_file=$_FILES['userfile']['name']；
$upload->http_error=$_文件['userfile']['error']；
$upload->do_filename_check='y'；//使用此布尔值检查有效的文件名
如果（$upload->upload（））{
呼应"成功",；
回显“”。$upload->file_copy.“已成功上载”；
//返回上传文件
回显'.$upload->file_copy'；
}否则{
echo“失败”；
回显“”。$upload->显示错误字符串（）；
}
}

到目前为止，我看到了一些潜在的问题：

只有一个文件上传

• 对于多文件上传，我认为文件输入的

  name

  属性应该类似于

  userfiles[]

  。这样它就不会被覆盖。仅供参考：如果两个HTML输入具有相同的名称，但没有

  []

  ，则只有后者将通过请求发送

  []

  还可用于发送任何具有多个值的数据，如

  选择

  （想想数组，它在$\u POST中表示为数组）
• 我真的不知道你的上传处理程序，你确定它可以处理多个文件上传吗

我猜您在

表单

之前包含了脚本标记？尝试将事件代码放入jQuery domReady中，如下所示

---

您可能需要先检查此问题。

标题与您的问题有什么关系？哎呀。对不起，我忘记换了。StackOverflow保存了标题中的最后一个问题

$(function() {
     $('form').submit(function (event) {
        event.preventDefault();
        html5Upload($('form.mupload'));
        return false;
    });
});