AJAX 中的异步文件传输

要使用 Ajax 在 jQuery 中传输文件，我们遵循以下步骤和一个演示相同的示例：

1. 使用 HTML5，我们可以使用表单上传文件。内容类型指定为multipart/form-data 。
2. 为要上传的文件创建输入字段，输入类型为file 。
3. 我们可以使用 multiple 属性来允许上传多个文件，也可以使用 accept 属性过滤文件类型。
4. 上传时，侦听器迭代地将上传的文件附加到文件列表中。
5. 使用提交按钮创建一个 ajax 请求，并将表单数据发送到指定的 url。

示例：这里考虑异步发送视频的情况。

我们创建了一个 HTML5 表单，如下所示：

    

        

            Select Files
            
        
  
        
    

使用 jQuery，我们创建了异步上传和发送文件的适当方法。

var fileList = [];
  
$('#file').on('change', function (event) {
  
    fileList = [];
  
    // Append files to fileList
    for (var i = 0; i < this.files.length; i++) {
        fileList.push(this.files[i]);
    }
});
  
sendFile = function (file) {
  
    // Create Ajax Request
    $.ajax({
        url: 'notify.php',
        type: 'POST',
        data: new FormData($('form')[0]),
        cache: false,
        contentType: false,
        processData: false
    });
}
  
$('#capt').on('submit', function (event) {
    event.preventDefault();
      
    //Asynchronous Transfer
    sendFile(file);
});

为了演示输出，我们创建了一个最小的PHP文件，如下所示：

";
}
?>

• 输出（通知PHP）：