jquery实现异步文件上传ajaxfileupload.js

jQuery实现异步文件上传ajaxfileupload.js攻略

1. 异步文件上传是什么

异步文件上传解决的问题是怎样在不刷新页面的情况下，将文件上传到服务器并得到返回结果。根据浏览器原生表单的限制，普通的文件上传需要跳转到一个新页面并在其中进行上传操作，这时候会造成页面卡顿、用户体验不好等问题，因此异步文件上传相应就应运而生。

2. ajaxfileupload.js是什么

ajaxfileupload是一个轻量级的jQuery异步文件上传插件，可以实现使用ajax异步上传文件，并支持文件类型、文件大小、上传进度、返回状态等校验。

3. 使用ajaxfileupload.js实现异步文件上传的流程

1. 引入jQuery库和ajaxfileupload.js插件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ajaxfileupload/3.7.1/ajaxfileupload.js"></script>

1. 编写html代码，定义一个文件上传表单

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <button type="submit" id="submitBtn">上传</button>
</form>

1. 编写jQuery代码，实现异步上传文件

$(function() {
  // 点击上传按钮时，调用ajaxfileupload函数实现异步上传文件
  $('#submitBtn').on('click', function() {
    $.ajaxFileUpload({
      url: 'upload.php', // 异步上传接口地址
      secureuri: false, // 是否安全传输，一般设置成false
      dataType: 'json', // 返回值类型，一般设置成json
      fileElementId: 'file', // 文件上传表单元素
      success: function(data, status) {
        // 上传成功后的回调函数，data即为上传接口返回的数据
        console.log(data);
      },
      error: function(data, status, e) {
        // 上传失败后的回调函数
        console.log(e);
      }
    });
  });
});

4. ajaxfileupload.js的常用参数及说明

参数名	类型	默认值	说明
url	string	''	文件上传的接口地址
secureuri	bool	false	是否使用安全传输协议
fileElementId	string	''	上传文件表单元素的id
dataType	string	'json'	接口返回的数据类型
success	function	null	上传成功后的回调函数
error	function	null	上传失败后的回调函数
fileSize	number	0	文件允许的最大大小，单位是KB
fileType	array	[]	允许上传的文件类型数组
timeout	number	30000	请求超时时间，单位是毫秒
beforeSend	function	null	发送ajax请求前的回调函数
onComplete	function	null	请求完成时的回调函数
dialogHandle	function	null	异步上传时的等待框处理函数

5. 示例说明

示例一：限制上传文件大小和类型

为了保护服务器的安全，一般上传文件时都会对文件大小和类型进行校验，下面的示例演示如何限制上传文件的最大大小和允许上传的文件类型。

$(function() {
  $('#submitBtn').on('click', function() {
    // 获取上传文件表单元素
    var fileInput = $('#file');
    // 获取上传的文件名
    var fileName = fileInput.val().split('\\').pop();
    // 获取上传的文件大小
    var fileSize = (fileInput[0].files[0].size / 1024).toFixed(2);
    // 定义允许上传的文件类型
    var allowType = ['jpg', 'jpeg', 'png', 'gif'];
    // 获取文件后缀
    var suffix = fileName.split('.').pop().toLowerCase();
    if ($.inArray(suffix, allowType) == -1) {
      alert('上传失败，只允许上传' + allowType.join('/') + '类型的文件');
      return false;
    } else if (fileSize > 1024) {
      alert('上传失败，文件大小不能超过1MB');
      return false;
    } else {
      $.ajaxFileUpload({
        url: 'upload.php',
        secureuri: false,
        dataType: 'json',
        fileElementId: 'file',
        success: function(data, status) {
          console.log(data);
        },
        error: function(data, status, e) {
          console.log(e);
        }
      });
    }
  });
});

示例二：显示上传进度条

异步上传文件时，可以使用ajax的progress事件来实现上传进度条的显示。示例代码如下：

$(function() {
  $('#submitBtn').on('click', function() {
    // 定义progress事件的回调函数
    function progressCallback(evt) {
      var percent = Math.round((evt.loaded / evt.total) * 100) + '%';
      $('.progress-bar').css('width', percent);
      $('.progress-bar .percent').text(percent);
    }
    // 显示上传进度条
    $('.progress').removeClass('hidden');
    $.ajaxFileUpload({
      url: 'upload.php',
      secureuri: false,
      dataType: 'json',
      fileElementId: 'file',
      success: function(data, status) {
        console.log(data);
      },
      error: function(data, status, e) {
        console.log(e);
      },
      progress: function(evt) {
        progressCallback(evt);
      }
    });
  });
});

6. 总结

ajaxfileupload.js是一个非常实用的jQuery异步文件上传插件，可以轻松地实现异步上传文件、限制上传文件大小和类型、显示上传进度条等常用功能。使用该插件，可以使文件上传变得更加智能化，同时也能提高用户体验和页面的响应速度。