jQuery File Upload 使用教程

2025-02-19 08:30:12

在现代 Web 应用开发中，文件上传是一个常见的功能需求。jQuery File Upload 是一个功能强大的文件上传插件，支持多种文件上传方式和丰富的配置选项。它提供了简单易用的 API 和直观的用户界面，适用于各种文件上传场景。本文将详细介绍 jQuery File Upload 的主要功能、特点以及使用方法，帮助读者更好地了解和使用这款优秀的工具。

主要功能

多种文件上传方式

jQuery File Upload 支持多种文件上传方式，包括单文件上传、多文件上传、拖放上传和文件夹上传。这种多文件上传方式使得用户可以灵活地上传不同类型和数量的文件。

进度条显示

jQuery File Upload 提供了进度条显示功能，用户可以实时查看文件上传的进度。进度条显示功能提升了用户体验，让用户知道上传的状态。

预览功能

jQuery File Upload 支持文件预览功能，用户可以在上传前预览文件内容。预览功能确保了用户上传的文件符合预期，减少了上传错误。

文件类型限制

jQuery File Upload 提供了文件类型限制功能，用户可以设置允许上传的文件类型。文件类型限制功能确保了上传文件的安全性和合规性。

文件大小限制

jQuery File Upload 提供了文件大小限制功能，用户可以设置允许上传的文件大小。文件大小限制功能防止了用户上传过大的文件，提高了服务器的性能和稳定性。

自定义上传按钮

jQuery File Upload 支持自定义上传按钮，用户可以使用自定义的按钮样式和文本。自定义上传按钮功能提升了界面的美观性和用户体验。

多语言支持

jQuery File Upload 支持多种语言，用户可以根据需要选择合适的语言进行文件上传。多语言支持功能确保了应用的国际化和本地化需求。

错误处理

jQuery File Upload 提供了强大的错误处理功能，能够捕获和处理上传过程中的错误。错误处理功能确保了应用的稳定性和可靠性，提升了用户体验。

集成第三方库

jQuery File Upload 支持集成第三方库，如 Blueimp Gallery 和 jQuery UI，提供了更多的功能和更好的用户体验。集成第三方库功能使得用户可以扩展插件的功能，满足不同的需求。

跨域上传

jQuery File Upload 支持跨域上传，用户可以上传文件到不同的服务器。跨域上传功能确保了应用的灵活性和可扩展性，适用于各种复杂的上传场景。

使用方法

安装 jQuery File Upload

  1. 下载插件: 访问 jQuery File Upload 的官方网站（https://blueimp.github.io/jQuery-File-Upload/），下载插件的源代码。

  2. 引入依赖: 在 HTML 文件中引入 jQuery 和 jQuery UI：

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  3. 引入插件文件: 在 HTML 文件中引入 jQuery File Upload 的 CSS 和 JavaScript 文件：

    <link rel="stylesheet" href="path/to/css/jquery.fileupload.css">
<script src="path/to/js/vendor/jquery.ui.widget.js"></script>
<script src="path/to/js/jquery.iframe-transport.js"></script>
<script src="path/to/js/jquery.fileupload.js"></script>

基本配置

  1. HTML 结构: 创建一个基本的 HTML 结构：

    <form id="fileupload" action="/server/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="files[]" multiple>
  <button type="submit">Upload</button>
  <div id="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
  </div>
  <div id="files" class="files"></div>
</form>

  2. 初始化插件: 使用 jQuery 初始化文件上传插件：

    $(function () {
  $('#fileupload').fileupload({
    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 + '%'
      );
    }
  });
});

多文件上传

  1. 启用多文件上传: 在 HTML 中使用 multiple 属性启用多文件上传：

    <input type="file" name="files[]" multiple>

  2. 处理多文件上传: 在 JavaScript 中处理多文件上传：

    $(function () {
  $('#fileupload').fileupload({
    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 + '%'
      );
    }
  });
});

拖放上传

  1. 启用拖放上传: 在 HTML 中添加拖放区域：

    <form id="fileupload" action="/server/upload" method="POST" enctype="multipart/form-data">
  <div class="dropzone">
    <span>Drop files here to upload</span>
  </div>
  <input type="file" name="files[]" multiple>
  <button type="submit">Upload</button>
  <div id="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
  </div>
  <div id="files" class="files"></div>
</form>

  2. 配置拖放上传: 在 JavaScript 中配置拖放上传：

    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    dropZone: $('.dropzone'),
    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 + '%'
      );
    }
  });
});

文件预览

  1. 启用文件预览: 在 HTML 中添加预览区域：

    <form id="fileupload" action="/server/upload" method="POST" enctype="multipart/form-data">
  <div class="dropzone">
    <span>Drop files here to upload</span>
  </div>
  <input type="file" name="files[]" multiple>
  <button type="submit">Upload</button>
  <div id="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
  </div>
  <div id="files" class="files"></div>
  <div id="preview" class="preview"></div>
</form>

  2. 配置文件预览: 在 JavaScript 中配置文件预览：

    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    dropZone: $('.dropzone'),
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        $('<p/>').text(file.name).appendTo('#files');
        if (file.thumbnailUrl) {
          $('<img/>').attr('src', file.thumbnailUrl).appendTo('#preview');
        }
      });
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });
});

文件类型限制

  1. 设置文件类型限制: 在 JavaScript 中设置允许上传的文件类型：
    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    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 + '%'
      );
    }
  });
});

文件大小限制

  1. 设置文件大小限制: 在 JavaScript 中设置允许上传的文件大小：
    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    maxFileSize: 5000000, // 5MB
    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 + '%'
      );
    }
  });
});

自定义上传按钮

  1. 自定义上传按钮: 在 HTML 中使用自定义的上传按钮：

    <form id="fileupload" action="/server/upload" method="POST" enctype="multipart/form-data">
  <div class="dropzone">
    <span>Drop files here to upload</span>
  </div>
  <input id="file-input" type="file" name="files[]" multiple style="display: none;">
  <button id="upload-button" type="button">Upload Files</button>
  <div id="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
  </div>
  <div id="files" class="files"></div>
</form>

  2. 配置自定义上传按钮: 在 JavaScript 中配置自定义上传按钮：

    $(function () {
  $('#upload-button').click(function () {
    $('#file-input').click();
  });

  $('#file-input').fileupload({
    dataType: 'json',
    dropZone: $('.dropzone'),
    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 + '%'
      );
    }
  });
});

多语言支持

  1. 设置多语言支持: 在 JavaScript 中设置多语言支持：
    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    messages: {
      maxFileSize: 'File is too large',
      acceptFileTypes: 'File type not allowed'
    },
    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 + '%'
      );
    }
  });
});

错误处理

  1. 处理上传错误: 在 JavaScript 中处理上传错误：
    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        if (file.error) {
          $('<p class="error"/>').text(file.error).appendTo('#files');
        } else {
          $('<p/>').text(file.name).appendTo('#files');
        }
      });
    },
    fail: function (e, data) {
      $.each(data.files, function (index, file) {
        $('<p class="error"/>').text('File ' + file.name + ' failed to upload').appendTo('#files');
      });
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });
});

集成第三方库

  1. 集成 Blueimp Gallery: 集成 Blueimp Gallery 进行文件预览：

    <link rel="stylesheet" href="https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<script src="https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<div id="blueimp-gallery" class="blueimp-gallery">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

  2. 配置 Blueimp Gallery: 在 JavaScript 中配置 Blueimp Gallery：

    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    dropZone: $('.dropzone'),
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        $('<p/>').text(file.name).appendTo('#files');
        if (file.thumbnailUrl) {
          $('<img/>').attr('src', file.thumbnailUrl).appendTo('#preview');
        }
      });
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });

  $('#preview').on('click', 'img', function () {
    var gallery = $('#blueimp-gallery').data('blueimpGallery') || $('#blueimp-gallery').blueimpGallery();
    gallery.add($(this).data('gallery'));
    gallery.show();
  });
});

跨域上传

  1. 配置跨域上传: 在服务器端配置 CORS 支持：

    const express = require('express');
const cors = require('cors');
const fileUpload = require('express-fileupload');
const app = express();

app.use(cors());
app.use(fileUpload());

app.post('/server/upload', function (req, res) {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  const file = req.files.files;
  file.mv(`./uploads/${file.name}`, function (err) {
    if (err) return res.status(500).send(err);
    res.json({ files: [{ name: file.name }] });
  });
});

app.listen(3000, function () {
  console.log('Server started on port 3000');
});

  2. 启用跨域上传: 在 JavaScript 中启用跨域上传：

    $(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    url: 'http://example.com/server/upload',
    crossDomain: true,
    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 + '%'
      );
    }
  });
});

总结

jQuery File Upload 是一个功能强大的文件上传插件，支持多种文件上传方式和丰富的配置选项。无论是多种文件上传方式、进度条显示、文件预览、文件类型限制、文件大小限制、自定义上传按钮、多语言支持、错误处理、集成第三方库还是跨域上传，jQuery File Upload 都能满足用户的各种需求。

blueimp
blueimp/jQuery-File-Upload
JQuery 文件上传插件，具有多文件、拖拽、进度条、图片音视频预览、续传等特性。
PHP
MIT
30.9 k