JavaScript Uploadify文件上传实例

下面是JavaScript Uploadify文件上传实例的完整攻略，主要包括以下几个部分：

1. 环境搭建

在开始之前，需要将环境搭建好，确保能够正常运行。需要安装以下两个组件：

• jQuery库（版本>=1.7）
• Uploadify插件（版本>=3.2）

2. HTML结构

在HTML页面中，需要创建一个file input来选择需要上传的文件，一个按钮来触发上传事件，并且还需要一个div来显示上传进度。HTML代码如下：

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:;" id="btn_upload">上传</a>
<div id="progress"></div>

3. JavaScript代码

首先需要调用jQuery库，并引入Uploadify插件。然后，在JavaScript中，需要指定一些参数，以及编写一些回调函数，来控制上传的行为：

$(function() {
  $('#file_upload').uploadify({
    'swf'      : '/uploadify/uploadify.swf',
    'uploader' : '/upload.php', //处理上传数据的PHP脚本
    'buttonText' : '选择文件',
    'fileTypeExts' : '*.jpg; *.png', //允许上传的文件类型
    'fileSizeLimit' : '2MB', //允许上传的文件大小
    'multi'    : true, //是否允许多文件上传
    'formData' : {}, //需要额外提交的表单数据
    'onUploadStart' : function(file) { //文件上传之前的回调函数
      //这里可以进行一些验证操作
      console.log('starting');
    },
    'onUploadSuccess' : function(file, data, response) { //文件上传成功的回调函数
      console.log('success');
      console.log(data); //返回的数据
    },
    'onUploadError' : function(file, errorCode, errorMsg, errorString) { //文件上传失败的回调函数
      console.log('error');
      console.log(errorMsg);
    },
    'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { //文件上传过程中的回调函数
      var progress = Math.round((bytesUploaded / bytesTotal) * 100);
      $('#progress').html(progress + '%');
    },
  });

  $('#btn_upload').click(function() { //点击上传按钮时触发上传事件
    $('#file_upload').uploadify('upload', '*');
  });
});

4. 示例说明

以下是两个示例，来演示如何使用Uploadify插件实现文件上传：

示例1：基本上传

$('#file_upload').uploadify({
  'swf'      : '/uploadify/uploadify.swf',
  'uploader' : '/upload.php',
  'buttonText' : '选择文件',
  'fileTypeExts' : '*.jpg; *.png',
  'fileSizeLimit' : '2MB',
  'onUploadSuccess' : function(file, data, response) {
    alert('上传成功！');
  },
  'onUploadError' : function(file, errorCode, errorMsg, errorString) {
    alert('上传失败：' + errorMsg);
  },
});

这个示例演示了最基本的上传功能。当用户选择了文件并点击上传按钮时，会触发上传事件。当上传成功时，会弹出一个提示框，告诉用户上传已经成功完成；当上传失败时，也会弹出一个提示框，告诉用户上传失败的具体原因。可以根据具体的需求来修改提示信息及其他参数。

示例2：带有额外表单数据的上传

$('#file_upload').uploadify({
  'swf'      : '/uploadify/uploadify.swf',
  'uploader' : '/upload.php',
  'buttonText' : '选择文件',
  'fileTypeExts' : '*.jpg; *.png',
  'fileSizeLimit' : '2MB',
  'formData' : {
    'name' : 'John Doe',
    'age'  : 27
  },
  'onUploadSuccess' : function(file, data, response) {
    alert('上传成功！');
  },
  'onUploadError' : function(file, errorCode, errorMsg, errorString) {
    alert('上传失败：' + errorMsg);
  },
});

这个示例演示了一个带有额外表单数据的上传功能。在formData参数中，可以指定需要额外提交的表单数据，可以自由添加、删除、修改这些表单数据，也可以将这些数据动态生成。在处理上传数据的PHP脚本中，可以通过$_POST或$_GET来获取这些表单数据，以便进行后续的处理。