如何使用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（upload.php）：

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

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

未定义的索引：第行的C：\\ wamp \\ www \\ TheClass \\ lesson_creator_page \\ upload.php中的演讲

我很确定我已经在formdata中定义了“演讲”，并将formdata传递给了php。 我在做错什么formData.append('lecture', $('#uploadlecture')[0].files[0]); ，是formData.append('lecture', $('#uploadlecture')[0].files[0]);行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上传文件的最好方法是使用插件。 以下是供您考虑的几个：

来自： 如何异步上传文件？

• 多文件上传插件
• 迷你多文件上传
• jQuery文件上传

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

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

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

编辑：如果您想成为更幻想的人，可以开发一个JAVA或SWF应用程序以嵌入到您的页面中来执行此操作。