Uploadify 3.0 详细使用说明

什么是 Uploadify

Uploadify 是一款基于 jQuery 的文件上传插件。它非常容易集成到任何网站中，支持多文件上传、文件类型过滤、文件大小限制、进度条等功能。

如何使用 Uploadify

首先，你需要下载 Uploadify 的脚本和样式文件。可以在官网或 Github 上找到它们。

接下来，你需要引入必要的文件。通常我们需要引入下面的两个文件：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Uploadify -->
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>

然后，在页面中创建一个文件上传的 DOM 元素：

<input type="file" name="file_upload" id="file_upload">

最后，我们可以使用 jQuery 的代码初始化 Uploadify 插件：

$(function() {
  $('#file_upload').uploadify({
    'swf': 'uploadify/uploadify.swf',
    'uploader': 'upload.php'
  });
});

上述代码中，'swf' 和 'uploader' 分别表示上传的 Flash 插件和服务器端上传的脚本。你需要根据实际情况更改为适当的地址。

Uploadify 的常用配置

除了以上示例中的配置项，Uploadify 还提供了许多有用的配置选项。以下是其中的几个：

'fileObjName'

设置上传时文件参数的名称，默认为 'Filedata'。

$('#file_upload').uploadify({
  'fileObjName': 'my_file',
  // 其他配置项
});

'fileSizeLimit'

设置文件大小限制，单位为字节。如果没有设置，则默认没有限制。

$('#file_upload').uploadify({
  'fileSizeLimit': '10MB',
  // 其他配置项
});

'fileTypeExts'

设置允许上传的文件类型。可以使用 * 通配符表示任意文件类型。多个类型用逗号隔开。

$('#file_upload').uploadify({
  'fileTypeExts': '*.jpg;*.png;*.gif',
  // 其他配置项
});

'onUploadSuccess'

上传成功后的回调函数，可以获取到服务器返回的数据。

$('#file_upload').uploadify({
  'onUploadSuccess': function(file, data, response) {
    alert('上传成功：' + data);
  },
  // 其他配置项
});

示例说明

示例一：上传文件并将文件名显示在列表中

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
  <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
  <style type="text/css">
    #file_list {
      margin: 10px 0;
      padding: 0;
      list-style: none;
    }
    #file_list li {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <input type="file" name="file_upload" id="file_upload">
  <ul id="file_list"></ul>
  <script type="text/javascript">
    $(function() {
      $('#file_upload').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php',
        'onUploadSuccess': function(file, data, response) {
          $('#file_list').append($('<li>').text(file.name));
        }
      });
    });
  </script>
</body>
</html>

upload.php 文件可以参考官方文档进行编写。

示例二：设置文件限制

$('#file_upload').uploadify({
  'fileSizeLimit': '5MB',
  'fileTypeExts': '*.jpg;*.png;*.gif',
  // 其他配置项
});

上述代码将限制上传的文件大小为 5MB，同时只允许上传 .jpg、.png 和 .gif 文件格式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：uploadify 3.0 详细使用说明 - Python技术站

uploadify 3.0 详细使用说明