jQuery File Upload文件上传插件使用详解

首先我们来了解一下jQuery File Upload这个文件上传插件。

什么是jQuery File Upload

jQuery File Upload是一个基于jQuery的文件上传插件，可以让我们在网站中方便地实现文件上传功能。它支持多文件上传、拖拽上传以及进度条等功能，可以帮助我们快速地实现文件上传功能。

如何使用jQuery File Upload

下面是jQuery File Upload的使用攻略：

步骤一：引用jQuery File Upload插件

在网页中引入jQuery和jQuery File Upload插件的js及css文件，可以直接从GitHub下载或者在npm上安装。

<!-- 加载jQuery -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 加载jQuery File Upload -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.12.5/css/jquery.fileupload.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.12.5/js/jquery.fileupload.min.js"></script>

步骤二：编写HTML页面

在HTML页面中添加一个文件上传的区域。

<div class="upload-area">
  <span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>添加文件...</span>
    <input id="fileupload" type="file" name="files[]" multiple>
  </span>
  <br>
  <br>
  <div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
  </div>
  <div id="files" class="files"></div>
</div>

步骤三：创建上传处理文件

在你网站的服务器上，你需要创建一个处理文件上传的脚本，例如PHP或者Python等语言。这个文件需要接收文件、保存文件并返回上传结果。

下面是一个基于PHP的上传文件处理示例：

<?php
$targetDir = "uploads/";
$tempFile = $_FILES['file']['tmp_name'];
$targetFile = $targetDir . $_FILES['file']['name'];
move_uploaded_file($tempFile, $targetFile);
?>

步骤四：编写JavaScript代码

在页面中添加JavaScript代码，来指定文件上传的参数和回调函数。

$(function() {
  $('#fileupload').fileupload({
    url: "upload.php",
    dataType: 'json',
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        $('<p/>').text(file.name).appendTo('#files');
      });
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });
});

其中，url参数指定了服务器端用于处理上传的文件，dataType指定了返回数据的格式，done和progressall分别指定了上传完成和上传进度的回调函数。

步骤五：启动上传

现在，你已经完成了使用jQuery File Upload插件的文件上传功能的设置，需要将网站部署在运行环境上后，启动上传即可。

至于怎么样启动文件上传，则需要根据你的实际需求来确定具体操作，可以添加一个点击事件来触发文件上传，也可以使用其他方式触发。

$('#fileupload').click();

示例说明

接下来，我们来看下两个使用jQuery File Upload插件的示例。

示例一：上传头像

这是一个简单的上传头像的示例，在示例中，我们给用户提供一个上传头像的功能，当用户选择图片文件后，便可以上传头像至服务器。

首先，在HTML页面中添加以下代码，包含一个头像上传区域及一个预览头像的div：

<div class="avatar-upload">
  <!-- 头像上传区域 -->
  <div class="upload-area">
    <span class="btn btn-success fileinput-button">
      <i class="glyphicon glyphicon-plus"></i>
      <span>上传头像</span>
      <input id="avatar-upload" type="file" name="avatar">
    </span>
    <br>
    <br>
    <div id="avatar-progress" class="progress">
      <div class="progress-bar progress-bar-success"></div>
    </div>
  </div>
  <!-- 头像预览 -->
  <div class="avatar-preview">
    <img id="avatar-image" src="default.jpg">
  </div>
</div>

然后，编写Javascript代码，来实现上传和预览头像等功能。

$(function() {
  // 头像上传
  $('#avatar-upload').fileupload({
    url: "upload.php",
    dataType: 'json',
    done: function (e, data) {
      $('#avatar-image').attr('src', data.result.files[0].url);
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#avatar-progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });
});

其中，上传完成后会将上传的头像改变为预览的头像，进度条可分别指定上传进度的显示进度和显示方式。

示例二：上传多个文件

这是一个上传多个文件的示例，在示例中，我们给用户提供一个上传多文件的功能，当用户选择多个文件后，便可以上传至服务器。

首先，在HTML页面中添加以下代码，包含一个文件上传区域及一个上传文件列表的div：

<div class="multi-upload">
  <!-- 文件上传区域 -->
  <div class="upload-area">
    <span class="btn btn-success fileinput-button">
      <i class="glyphicon glyphicon-plus"></i>
      <span>添加文件...</span>
      <input id="multi-upload" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <div id="multi-progress" class="progress">
      <div class="progress-bar progress-bar-success"></div>
    </div>
  </div>
  <!-- 文件上传列表 -->
  <div class="multi-files">
    <ul id="multi-files-list"></ul>
  </div>
</div>

然后，编写Javascript代码，来实现上传和预览多个文件等功能。

$(function() {
  // 多文件上传
  $('#multi-upload').fileupload({
    url: "upload.php",
    dataType: 'json',
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        $('<li/>').text(file.name).appendTo('#multi-files-list');
      });
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#multi-progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });
});

其中，上传完成后会将上传成功的文件名显示在上传列表中，进度条可分别指定上传进度的显示进度和显示方式。

到此，我们已经完成了使用jQuery File Upload插件的文件上传功能的设置，你可以根据实际需求来灵活使用插件提供的功能来完成开发。