jquery.uploadify php,jquery组件Uploadify的使用

在百通微博项目的开发过程中曾遇到了这样一个难题，一个发图片微博的功能，需要做到上传并预览图片，但传统的上传功能是运用的简单的file控件，如果要将图片上传到服务器的话还需另外添加上传功能，而且后面的预览功能仍需要另外写js去实现，整个过程比较繁琐，而且做出来的效果也并不美观，所以我抛弃了传统做法，并在网上搜索新的功能组件，于是，便找到了就jquery的uploadify组件。

jquery大家都知道，是一个轻量级而且很优秀的Javascrīpt框架，兼容性相当好，是开发人员必备之物，而由它开发的uploadify组件，在网上的评论也是很不错的，他的优势有很多：支持单文件或多文件上传，可控制并发上传的文件数 ；在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……；通过参数可配置上传文件类型及大小限制；通过参数可配置是否选择文件后自动上传；易于扩展，可控制每一步骤的回调函数(onSelect, onCancel……)；通过接口参数和CSS控制外观等等。

下面介绍一下uploadify组件的具体使用：

uploadify组件的内容其实不复杂，下载解压下来后，发现他有一大堆的文件，其实主要我们用到的只有那么几个：以看到里面的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处理文件)。他的主要文件方法文件就是jquery.uploadify.js了。

uploadify的参数比较多，主要包括：

uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值： uploadify.swf。

script ：   后台处理程序的相对路径 。默认值：uploadify.php

checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径

fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata

method ： 提交方式Post 或Get 默认为Post

scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain

folder ：  上传文件存放的目录 。

queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。

queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。

multi ： 设置为true时可以上传多个文件。

auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。

fileDesc ： 这个属性值必须设置fileExt属性后才有效。   sizeLimit ： 上传文件的大小限制 。

simUploadLimit ： 允许同时上传的个数 默认值：1 。

buttonText ： 浏览按钮的文本，默认值：BROWSE 。

buttonImg ： 浏览按钮的图片的路径 。

hideButton ： 设置为true则隐藏浏览按钮的图片 。

rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。

width ： 设置浏览按钮的宽度 ，默认值：110。

height ： 设置浏览按钮的高度 ，默认值：30。

wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。

cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标。

fileExt ： 设置可以选择的文件的类型，格式如：’*.doc;*.pdf;*.rar’ 。

运用时，我们引入**.uploadify.min.js及uploadify.css文件， 前提是我们需要引入jquery文在先

然后即可在js中插入相应的js代码了：

$(document).ready(function()

{

$(“#uploadify”).uploadify({

‘uploader’: ‘JS/jquery.uploadify-v2.1.0/uploadify.swf’,

‘script’: ‘UploadHandler.ashx’,

‘cancelImg’: ‘JS/jquery.uploadify-v2.1.0/cancel.png’,

‘folder’: ‘UploadFile’,

‘queueID’: ‘fileQueue’,

‘auto’: false,

‘multi’: true,

‘onInit’:function(){alert(“1”);},

‘onSelect’: function(e, queueId, fileObj){

alert(“唯一标识:” + queueId + “rn” );

}

});

});

需要注意的是，uploadify方法一定要加载在初始化方法中，否则无效果，具体的参数设定就由你当前的功能决定了。到这一步，一个js上传与带进度条预览的效果便完成了，用uploadify组件即减少了代码输出量，也使页面效果更美观。