AJAX中的异步文件传输

要在jQuery中使用Ajax传输文件，我们按照以下步骤和一个例子来演示。

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

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

• 我们已经创建了一个HTML5表格，如下所示。

<div>
    <form method="POST" enctype="multipart/form-data"
            action="" id="capt">
        <div class="form-group">
            <label>Select Files</label>
            <input type="file" id="file" name="file[]"
                accept="video/*" class="form-control"
                multiple="multiple" required>
        </div>
  
        <input type="submit" class="btn btn-info"
                value="Submit">
    </form>
</div>

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

var fileList = [];
  
('#file').on('change', function (event) {
  
    fileList = [];
  
    // Append files to fileList
    for (var i = 0; i.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
  
video =_FILES['file']['name'];
foreach(video asvd){
    echo $vd."<br>";
}
?>

• 输出(notify.php):