如何使用ajax上传文件？

Question

HTML：

 <form id="confirmresourceform" enctype="multipart/form-data" method="post" style="display: none;">
              <input id="uploadlecture" name="fileToUpload1" type="file" value="Upload Resources"/>
           </form>

Javascript/Jquery/Ajax：

$("#submitchanges").on("click",function(){
    //Upload files
    var formData = new FormData(document.getElementById("confirmresourceform"));
    formData.append('lecture', $('#uploadlecture')[0].files[0]);
    $.ajax({
        type: 'POST',
        url: 'upload.php',
        contentType: false, 
        processData: false,
        data: formData,
         success: function (data) {
           console.log(data);
         }
    });
});

PHP(上传.php)：

echo $_FILES['lecture']['name'];

好的，所以我正在尝试使用 ajax 上传文件（单击 div 而不是使用提交表单的东西）。我已经让 jQuery 使用键“lecture”将文件数据附加到 formdata。目前upload.php 脚本只有一行来回显文件名。但是，当 ajax 运行并调用 upload.php 时，出现以下错误：

未定义的索引：讲座 C:\wamp\www\TheClass\lesson_creator_page\upload.php 上线 4

我很确定我已经在表单数据中定义了“讲座”并将表单数据传递给 php.ini。我做错了什么吗？formData.append('lecture', $('#uploadlecture')[0].files[0]); 行是否正确？

Answer 1

几个月前我遇到了同样的问题，并通过使用“.ajaxFileUpload”执行以下操作解决了它：

在您的 jquery 中，该集合如下所示：

jQuery.ajaxFileUpload({
            url             : "upload.php",
            secureurl       : false,
            fileElementId   : "fileToUpload1",
            dataType        : 'json',
            data            : {
               // if you have another data to pass in your phhp     
            },
            success : function ()
            {

             },
            error  : function(){

            }
        });

Answer 2

网上有很多关于这方面的文献。

使用 Ajax 进行文件上传的最佳方式是使用插件。这里有几个供您考虑：

发件人：How can I upload files asynchronously?

• Multiple File Upload Plugin
• Mini Multiple File Upload
• jQuery File Upload

您可以从 jQuery 的插件站点搜索更多内容。

如果您不想使用插件，那么最好的办法是使用 iFrame。

您也可以使用 javascript 的文件 API，但并非所有浏览器都支持。在这里查看：https://developer.mozilla.org/en/docs/Web/API/File

编辑： 如果您想变得更高级，您可以开发一个 JAVA 或 SWF 应用程序嵌入到您的页面中来做到这一点。