Javascript 如何异步上传文件

terry 2年前 (2023-09-07) 阅读数 425 #Html5

文章标签 JavaScript

使用 HTML5，您可以使用 Ajax 和 jQuery 上传文件。不仅如此，您还可以使用 HTML5 进程标记（或 div）来执行文件验证（名称、大小和 MIME 类型）或处理 progress 事件。

下面我给出一个实现方法：

HTML

Javascript

我们可以通过文件更改事件进行一些检查

$(':file').on('更改', function () {
  var 文件 = 这个 .文件[0]；

  if (文件大小 > 1024) {
    alert('上传文件最大大小为1k');//限制文件上传大小
  }

  
});

点击上传按钮开始活动

$(':按钮').on('点击', function () {
  $.ajax({
    // 服务器处理脚本
    url: '上传.php',
    类型：'发布'，

    // 表单数据
    数据： new FormData($('form')[0]),

    // 告诉jquery不要处理数据并且不用担心内容类型
    // 必须包含以下属性
    缓存：假，
    内容类型：假，
    处理数据：假，

    xhr: 函数 () {
      var myXhr = $.ajaxSettings。 xhr();
      if (myXhr.upload) {
        // 用于处理上传过程myXhr.upload.addEventListener('progress', function (e) {
          if (e.长度可以计算) {
            $('progress').attr({
              值：e.loaded，
              最大：e。完全的，
            });
          }
        }， 错误的）;
      }
      返回 myXhr；
    }
  });
});

正如您所看到的，使用 HTML5（和一点研究）上传文件不仅是可能的，而且非常容易。尝试使用 Google Chrome，因为某些浏览器可能不兼容。