jQuery插件ajaxfileupload.js实现上传文件

一、安装jQuery插件ajaxfileupload.js

首先在官网（https://www.jqueryscript.net/file/Ajax-File-Upload-Plugin-with-jQuery-ajaxFileUpload-js.html）下载ajaxfileupload.js文件，并将其复制到项目中。
在页面中引入jQuery和ajaxfileupload.js脚本文件：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="path/to/ajaxfileupload.js"></script>

二、简单示例

以下是一个简单的示例，演示了如何使用ajaxfileupload.js插件来上传文件。该示例将在文件成功上传后显示一个成功的消息。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery ajaxfileupload.js插件示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="path/to/ajaxfileupload.js"></script>
</head>
<body>
  <h1>jQuery ajaxfileupload.js示例</h1>
  <form enctype="multipart/form-data">
    <input type="file" name="file">
    <button id="uploadBtn">上传</button>
  </form>
  <div id="msg"></div>
  <script>
    $('#uploadBtn').on('click', function(e) {
      e.preventDefault();
      $.ajaxFileUpload({
        url: 'upload.php',
        secureuri: false,
        fileElementId: 'file',
        dataType: 'json',
        success: function(data, status) {
          if (data.code == 0) {
            $('#msg').text(data.message);
          } else {
            alert(data.message);
          }
        },
        error: function(data, status, e) {
          alert(e);
        }
      });
    });
  </script>
</body>
</html>

在上面的代码示例中，我们创建了一个表单，用于选择要上传的文件。在点击上传按钮时，我们使用ajaxfileupload.js插件将所选文件上传到服务器上。

当文件上传成功时，服务器将返回一个JSON格式的响应。如果响应代码为0，则说明上传成功。我们将消息显示在页面上。如果响应代码不为0，则说明上传失败，我们将弹出一个错误对话框。

三、进阶示例

以下是一个更进阶的示例，演示了如何使用ajaxfileupload.js插件上传多个文件，并在上传过程中显示进度条。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery ajaxfileupload.js插件示例</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .progress { height: 20px; }
    .progress-bar { line-height: 20px; }
  </style>
</head>
<body>
  <h1>jQuery ajaxfileupload.js示例</h1>
  <form enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button id="uploadBtn">上传</button>
  </form>
  <div id="progressContainer" class="progress">
    <div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span>0%</span></div>
  </div>
  <div id="msg"></div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="path/to/ajaxfileupload.js"></script>
  <script>
    $('#uploadBtn').on('click', function(e) {
      e.preventDefault();
      var files = $('input[name="file"]')[0].files;
      var count = files.length;
      if (count > 0) {
        var loaded = 0;
        var total = 0;
        var progress = $('#progress');
        $.each(files, function(i, file) {
          total += file.size;
          $.ajaxFileUpload({
            url: 'upload.php',
            secureuri: false,
            fileElementId: 'file',
            dataType: 'json',
            data: { name: file.name },
            success: function(data, status) {
              loaded += file.size;
              var percent = loaded / total * 100;
              progress.css('width', percent + '%').attr('aria-valuenow', percent).find('span').text(percent.toFixed(2) + '%');
              if (data.code == 0)
                $('#msg').append('<p>' + data.message + '</p>');
              else
                alert(data.message);
            },
            error: function(data, status, e) {
              alert(e);
            }
          });
        });
      }
    });
  </script>
</body>
</html>

在这个示例中，我们使用了Bootstrap框架的进度条组件来显示上传进度。当用户选择了文件并点击上传按钮时，我们遍历每个文件并使用ajaxfileupload.js插件将它们发送到服务器。

在上传过程中，我们根据已上传的文件大小计算上传进度，并将其显示在页面上。当上传完成时，服务器将返回一个JSON格式的响应。如果响应代码为0，则说明上传成功。我们将消息添加到页面上。如果响应代码不为0，则说明上传失败，我们将弹出一个错误对话框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery插件ajaxfileupload.js实现上传文件 - Python技术站

jQuery插件ajaxfileupload.js实现上传文件

相关文章