jquery插件uploadify实现带进度条的文件批量上传

下面我会详细讲解如何使用jquery插件uploadify来实现带进度条的文件批量上传。

一、安装uploadify插件

首先需要安装uploadify插件，使用方法如下：

1. 下载uploadify插件包并解压到项目目录下。
2. 在html页面中引入jQuery库和uploadify所需的CSS和JavaScript文件。

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入uploadify所需的CSS和JavaScript文件 -->
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>

二、HTML页面代码

在HTML页面中要添加一个上传容器，定义上传按钮和进度条的样式。

<!-- 添加上传容器 -->
<div id="upload-container">
  <!-- 上传按钮 -->
  <input type="file" name="file_upload" id="file_upload" />
  <!-- 进度条 -->
  <div id="upload-progress"></div>
</div>

三、JS代码实现

使用jQuery选择器选中上传按钮，然后进行上传插件的初始化操作。

// 初始化uploadify插件
$('#file_upload').uploadify({
  // 上传的地址
  'uploader' : '/upload.php',
  // 选择文件按钮的文字
  'buttonText' : '选择文件',
  // 多文件上传批量选择文件
  'multi' : true,
  // 进度条
  'progressData' : 'percentage',
  // 文件上传完成的回调函数
  'onUploadComplete' : function(file) {
    alert('文件上传成功！');
  },
  // 上传进度条的样式
  'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
    var progress = parseInt(totalBytesUploaded / totalBytesTotal * 100);
    $('#upload-progress').css('width',  progress + '%');
  }
});

在上述代码中，定义了上传的地址、选择文件按钮的文字、多文件上传批量选择文件等选项。同时还定义了上传进度条的样式和上传完成的回调函数。

四、示例说明

示例1：上传单个文件

// 初始化uploadify插件
$('#file_upload').uploadify({
  // 上传的地址
  'uploader' : '/upload.php',
  // 选择文件按钮的文字
  'buttonText' : '选择文件',
  // 不允许多文件上传
  'multi' : false,
  // 进度条
  'progressData' : 'percentage',
  // 文件上传完成的回调函数
  'onUploadComplete' : function(file) {
    alert('文件上传成功！');
  },
  // 上传进度条的样式
  'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
    var progress = parseInt(totalBytesUploaded / totalBytesTotal * 100);
    $('#upload-progress').css('width',  progress + '%');
  }
});

以上示例中，设置multi为false，即不允许多文件上传，上传完成后会弹出提示框“文件上传成功！”。

示例2：上传多个文件

// 初始化uploadify插件
$('#file_upload').uploadify({
  // 上传的地址
  'uploader' : '/upload.php',
  // 选择文件按钮的文字
  'buttonText' : '选择文件',
  // 允许多文件上传
  'multi' : true,
  // 上传进度条的样式
  'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
    var progress = parseInt(totalBytesUploaded / totalBytesTotal * 100);
    $('#upload-progress').css('width',  progress + '%');
  }
});

以上示例中，设置multi为true，即允许多文件上传，上传完成后不做任何提示（因为没有设置onUploadComplete回调函数）。

综上所述，以上就是使用uploadify插件实现带进度条的文件批量上传的完整攻略。