📜  AJAX 中的异步文件传输

📅  最后修改于: 2021-11-24 05:42:05             🧑  作者: Mango

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

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

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

  • 我们创建了一个 HTML5 表单,如下所示:
        
            
                                      
                    
  • 使用 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):