jQuery无刷新上传之uploadify3.1简单使用

为了详细讲解“jQuery无刷新上传之uploadify3.1简单使用”的完整攻略，我们需要按照一定的顺序进行介绍和操作。下面是教程的步骤：

1. 引入uploadify插件和jquery插件

为了使用uploadify插件，我们首先需要引入jQuery插件和uploadify插件的js文件和css文件。通常情况下，我们可以在html文档中直接引入这些文件。按照如下代码，把js和css文件引入到HTML文件的head标签中即可。

<head>
  <link rel="stylesheet" type="text/css" href="path/to/uploadify.css">
  <script type="text/javascript" src="path/to/jquery.min.js"></script>
  <script type="text/javascript" src="path/to/jquery.uploadify.min.js"></script>
</head>

2. 创建上传按钮和文件选择框

在HTML文档中创建两个元素，一个是上传按钮，另一个是文件选择框。

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:;" id="upload-btn">上传</a>

3. 定义jQuery上传插件的参数

接下来需要定义uploadify上传插件的参数，包括上传的目标url地址，上传时需要的一些参数等。可以按如下代码定义：

$(function() {
  $('#file_upload').uploadify({
    'swf'           : 'path/to/uploadify.swf',
    'uploader'      : 'path/to/upload.php',
    'buttonText'    : '选择文件',
    'fileSizeLimit' : '10MB',
    'fileTypeExts'  : '*.jpg;*.jpeg;*.gif;*.png',
    'formData'      : {
      'token'     : 'abc123',
      'timestamp': '1234567890'
    },
    'onUploadSuccess' : function(file, response) {
      alert('文件 ' + file.name + ' 上传成功！');
    }
  });
});

其中，参数的含义如下：

swf：Flash文件的地址，用于帮助上传过程中显示文件选择框。这个文件可以在uploadify的压缩包中找到。
uploader：上传文件的地址，可以是相对于当前页面的地址或者是绝对地址。
buttonText：上传按钮上的文字信息，上传过程中用户可以点击此按钮选择文件。
fileSizeLimit：上传文件的最大限制，这个限制是以字节为单位的。
fileTypeExts：上传文件的类型限制，这个参数可以设置具体的文件类型后缀，多个类型用分号隔开。
formData：提交给后台处理的额外参数。在这里设置了一个token和timestamp参数，可以根据自己的需求添加或修改参数。
onUploadSuccess：上传成功后的回调函数，这里是通过弹窗提示用户上传成功。

4.上传文件及显示过程

在上述代码的基础上，添加上传按钮的点击事件监听。当用户点击按钮时，文件上传框应该弹出。完成上传的流程。如下代码：

$(function() {
  $('#file_upload').uploadify({
    'swf'           : 'path/to/uploadify.swf',
    'uploader'      : 'path/to/upload.php',
    'buttonText'    : '选择文件',
    'fileSizeLimit' : '10MB',
    'fileTypeExts'  : '*.jpg;*.jpeg;*.gif;*.png',
    'formData'      : {
      'token'     : 'abc123',
      'timestamp': '1234567890'
    },
    'onUploadSuccess' : function(file, response) {
      alert('文件 ' + file.name + ' 上传成功！');
    }
  });

  $('#upload-btn').click(function() {
    $('#file_upload').uploadify('upload', '*');
  });

});

在这个示例中，我们增加了一个click监听事件，让用户点击上传按钮时能够触发uploadify函数执行上传流程。同时，利用参数'*'表示上传所有文件。

整个上传文件的过程就完成了，这里我演示了一个带图片预览的uploadify插件demo，可以通过参考链接学习更多uploadify的知识。

参考链接：jquery-uploadify-example

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery无刷新上传之uploadify3.1简单使用 - Python技术站