jQuery无刷新上传之uploadify3.1简单使用
作者：酷小孩
字体：[ ] 类型：转载 时间：
本文主要介绍jQuery插件uploadify3.1的简单使用，希望能帮到大家，有需要的朋友可以参考一下。
昨天在网上找到了一个叫做uploadify的jquery上传插件，看到有几篇文章也是介绍这个插件的，心想何不用这个试试。
不过网上的这几篇文章用到的uploadify还是以前的旧版本uploadify-v2.1.0，我在官网上下载的是uploadify-v3.1版，其中的一些参数以及调用方法也不同了，还好官网有帮助文档。
（唯一感觉不爽的一点就是这个开发包是针对php的，官网并没有.NET版本，但至少原理都是一样的，简单的修改一下就可以了。还是那句话“不仅要知其然，还要知其所以然”，知其所以然了，一切都是浮云啊）
好了，废话不多说。先上个效果图，有图有真相：
一：从官网下载开发包添加到项目中，我对这个开发包做了一个精简，删去了那些php方面的文件：
项目基本结构：
二：添加对css和js文件的引用：
注意jquery.js文件和uploadify.js文件的调用顺序。
三：Default.aspx页面的代码如下：
&head runat="server"&
&title&&/title&
&link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" /&
&script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"&&/script&
&script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
$("#uploadify").uploadify({
//指定swf文件
'swf': 'js/uploadify/uploadify.swf',
//后台处理的页面
'uploader': 'UploadHandler.ashx',
//按钮显示的文字
'buttonText': '上传图片',
//显示的高度和宽度，默认 height 30；width 120
//'height': 15,
//'width': 80,
//上传文件的类型 默认为所有文件 'All Files' ; '*.*'
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeDesc': 'Image Files',
//允许上传的文件后缀
'fileTypeExts': '*. *. *.png',
//发送给后台的其他参数通过formData指定
//'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
//上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
//'queueID': 'fileQueue',
//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true
&%--用来作为文件队列区域--%&
&div id="fileQueue"&
&input type="file" name="uploadify" id="uploadify" /&
&a href="javascript:$('#uploadify').uploadify('upload')"&上传&/a&|
&a href="javascript:$('#uploadify').uploadify('cancel')"&取消上传&/a&
四：一般处理程序UploadHandler.ashx简单代码如下：
public void ProcessRequest(HttpContext context)
context.Response.ContentType = "text/plain";
///babycool/
//接收上传后的文件
HttpPostedFile file = context.Request.Files["Filedata"];
//其他参数
//string somekey = context.Request["someKey"];
//string other = context.Request["someOtherKey"];
//获取文件的保存路径
string uploadPath =
HttpContext.Current.Server.MapPath("UploadImages" + "\\");
//判断上传的文件是否为空
if (file != null)
if (!Directory.Exists(uploadPath))
Directory.CreateDirectory(uploadPath);
//保存文件
file.SaveAs(uploadPath + file.FileName);
context.Response.Write("1");
context.Response.Write("0");
public bool IsReusable
五：用到的参数介绍：
通过查看jquery.uploadify-3.1.js中的默认设置并参考官方文档可得知：
参数不重新指定则保持默认：
swf：uploadify.swf 文件的相对路径
uploader：后台处理程序的相对路径
buttonText：按钮显示的文字
上传文件的类型默认为所有文件& 'All Files'&&& '*.*'
可以通过以下两参数指定，指定方法见步骤三中的代码：
fileTypeDesc；fileTypeExts；
auto：为true表示选择文件后自动上传；如果不想自动上传，需设定为false，并通过
&a href="javascript:$('#uploadify').uploadify('upload')"&上传&/a&|
&a href="javascript:$('#uploadify').uploadify('cancel')"&取消上传&/a&
来指定是上传还是取消上传；
multi：设置为true将允许多文件上传；
method： 提交方式Post 或Get 默认为Post；
queueSizeLimit：当允许多文件上传时，设置选择文件的个数，默认值为999 ；
另外，取消上传图片的路径是设置在css文件中的；
其他更多设置可以参考官网的帮助文档。
六：将上传完成后显示的Complete显示为中文
一位网友提出“
英文的Complete不能改成中文”，这可能是之前的版本不能进行修改。我通过查看源代码 jquery.uploadify-3.1.js找到了上传完成时显示的内容：
再参考官方的帮助文档，可以得知，在“
onUploadSuccess” 事件中可以设置上传完成后所执行的代码，则修改后的代码为：
//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true,
//上传成功后执行
'onUploadSuccess': function (file, data, response) {
$('#' + file.id).find('.data').html(' 上传完毕');
还有一个需要注意的一点是：一般在设定了选择上传文件路径时比如只允许上传*.*.*.gif格式的图片文件，则除了指定fileTypeDesc；fileTypeExts；两个参数外，还要在服务器端即一般处理程序中再次对上传文件的文件扩展名进行判断，以防一些用户跳过客户端验证上传恶意文件。
下面附上我在博客园找到的那两篇介绍uploadify的文章链接，供大家参考：
并附上uploadify的
我整理的开发包：
当然，这仅仅是一个简单的试用，具体用到项目中还要考虑很多方面的问题。
欢迎各位大神多多指教，如果该文章对你有帮助大家可以一起讨论讨论。
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具关于uploadify附件上传之后删除问题 - 开源中国社区
当前访客身份：游客 [
当前位置：
代码奉上：
$('#electronOther').uploadify({
'uploader': '&%=path%&/js/uploadify/uploadify.swf',
& & & &'script': '&%=path%&/*/*!*.action', //指定服务端处理类的入口
'cancelImg' : '&%=path%&/js/uploadify/cancel.png', //取消按钮
& & & &'queueID': 'fileQueue', //文件上传后显示位置
& & & &'fileDataName': 'fileInput',//和input的name属性值保持一致
& & & &'auto': true,//是否选取文件后自动上传 &&
& & & &'multi': true,//是否支持多文件上传
& & & &'simUploadLimit' : 5,//每次最大上传文件数
'removeCompleted' : false, //不设置该选项或者将其设置为false，将使上传队列中的项目始终显示于队列中，直到点击了关闭按钮或者队列被清空。&
& & & &'buttonText': 'UPLOAD',//按钮上的文字
'buttonImg':'&%=path%&/js/uploadify/upload.png', //设置上传按钮背景图片
'wmode': 'transparent', //设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层
'hideButton': true,
& & & 'width': 72,
'height': 22,
& & & &'displayData': 'speed', //有speed和percentage两种，一个显示速度，一个显示完成百分比
'onComplete': function(event, ID, fileObj, response, data) { //文件上传完成后触发
'onCancel': function(event,ID,fileObj,data) { //当点击文件队列中文件的关闭按钮或点击取消上传时触发
项目用Struts2开发。
数据库表分为：数据表+文件表 & &数据表中存一个文件表的外键
在执行onComplete之前已经把上传的文件在服务器以及数据库的文件表中保存了，想要在onComplete里边获得文件表的主键存放进一个input中，这个input中可以存放n个文件表主键。
最主要的来了： 那么请问如果把上传之后文件表的主键存入input里边，然后删除的时候获得input里边的删除的这条文件id以及在Action中删除服务器上的当前文件以及数据库文件表的数据
共有0个答案
更多开发者职位上
有什么技术问题吗？
兮竹的其它问题
类似的话题插件描述：上传功能在我们的程序中是经常会用到的，而传统的http上传在安全性和文件大小上都会有一定的限制，而且不能看到上传进度。所以就出现了采用Flash和其他一些方式来实现人性化的上传效果。 那么今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -Uploadify，他有免费版和收费版两种，免费版的是用Flash实现的，而收费版的是用html5实现的
上传功能在我们的程序中是经常会用到的，而传统的http上传在安全性和文件大小上都会有一定的限制，而且不能看到上传进度。所以就出现了采用Flash和其他一些方式来实现人性化的上传效果。那么今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -Uploadify，他有免费版和收费版两种，免费版的是用Flash实现的，而收费版的是用html5实现的，主要有以下的特点：1、高度地定义化，参数、方法和事件丰富2、支持Flash和html两种版本3、强大的社区支持4、支持多文件上传和进度显示
接下来我就来介绍一下免费版的 Uploadify。
环境要求jQuery 的版本为 1.4.x 或者以上版本Flash Player 的版本为 9.0.24 或者更高版本一门服务端语言 PHP, ASP.Net, Cold Fusion, 或者类似的服务端语言使用步骤1、下载 Uploadify压缩包2、解压文件，将以下的文件复制到自己的网站中jquery.uploadify-3.1.min.jsuploadify.swfuploadify.cssuploadify-cancel.png在这里需要注意的是还有一个文件，是处理后台接收的，官方给的是PHP的Demo，所以如果你的程序是PHP的话，就将 uploadify.php 一同复制到自己的网站中，如果是其他语言的话则复制对应的后台处理文件，下面我会给出NET版本的源码。3、引入以下js和css文件&script&type=&text/javascript&&src=&/jquery-1.7.2.min.js&&&/script&
&script&type=&text/javascript&&src=&/jquery.uploadify-3.1.min.js&&&/script&4、在页面中添加一个file文本框&input&type=&file&&name=&file_upload&&id=&file_upload&&5、加入以下代码初始化插件&$(function()&{
&&&&$('#file_upload').uploadify({
&&&&&&&&'swf'&&&&&&:&'uploadify.swf',
&&&&&&&&'uploader'&:&'uploadify.php'
&&&&&&&&//&Put&your&options&here
});其中 swf 为 uploadify.swf 文件的路径uploader 为 后台处理程序的路径其它的参数大家可以参考 文档 在此我就不做讲述了整个html文件类似下面的代码&title&
&&&&My&Uploadify&Implementation
&link&rel=&stylesheet&&type=&text/css&&href=&uploadify.css&&
&script&type=&text/javascript&&src=&/jquery-1.7.2.min.js&&&/script&
&script&type=&text/javascript&&src=&jquery.uploadify-3.1.min.js&&&/script&
&script&type=&text/javascript&&
&&&&$(function()&{
&&&&&&&&$('#file_upload').uploadify({
&&&&&&&&&&&&'swf'&&&&&&:&'uploadify.swf',
&&&&&&&&&&&&'uploader'&:&'uploadify.php'
&&&&&&&&&&&&//&Your&options&here
&&&&&&&&});
&&&&&/script&
&input&type=&file&&name=&file_upload&&id=&file_upload&&NET版本后台处理程序这个是从网上找的，亲测可以使用，当然我们可以根据自己的需要做一些改变，比如文件保存的路径，文件名根据日期来命名等等。using&S&
using&System.D&
using&System.C&
using&System.C&
using&System.W&
using&System.Web.S&
using&System.Web.UI;&
using&System.Web.UI.WebC&
using&System.Web.UI.WebControls.WebP&
using&System.Web.UI.HtmlC&
using&System.IO;&
namespace&WebApplication2&
public&partial&class&Upload&:&System.Web.UI.Page&
protected&void&Page_Load(object&sender,&EventArgs&e)&
&&&&&&&&HttpPostedFile&file&=&Request.Files[&FileData&];&
&&&&&&&&string&uploadpath&=&Server.MapPath(Request[&folder&]&+&&\&);&
&&&&&&&&if&(file&!=&null)&
&&&&&&&&{&
&&&&&&&&&&&&if&(!Directory.Exists(uploadpath))&
&&&&&&&&&&&&&&&&{&
&&&&&&&&&&&&&&&&&&&&Directory.CreateDirectory(uploadpath);&
&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&&&&&file.SaveAs(uploadpath&+&file.FileName);&
&&&&&&&&&&&&&&&&Response.Write(&1&);&
&&&&&&&&&&&&}&
&&&&&&&&&&&&else&
&&&&&&&&&&&&{&
&&&&&&&&&&&&&&&&Response.Write(&0&);&
&&&&&&&&&&&&}&
&&&&&&&&}&
相关插件-上传
讨论这个项目（4）回答他人问题或分享插件使用方法奖励jQ币
你好 为什么上传成功后 找不到相应的文件啊. 也没有找到默认的uploads目录
我也没找到，亲咋解决的
注意jquery.js文件和uploadify.js文件的调用顺序。
'folder' : 'uploads' 要上传到的服务器路径，默认‘’
版本 43.0. m 不能显示
html里面没有类css怎么给类加样式的
这个上传插件很好用啊 页面也比较简洁 操作也很简单
果断扔掉那块不准的手表0
下载下来文档都没有
然而Firefox并不兼容360版本7极速模式并不兼容360版本8普通模式并不兼容IE11并不兼容IE10并不兼容=====想知道我配置还是本身就。。。。。。
为什么不能进入这个页面啦？
$('#file_upload').uploadify({
&&&&'swf':&'uploadify.swf',
&&&&'uploader':&'uploadify.php',
&&&&/感觉这个php里的代码没起到作用&&&
我这不能选择文件
PROMULGATOR
关注作者 (291)
收藏此插件 (78)
我当前jQ币余额：正在获取..
已下载次数：6406
所需jQ币：0推荐这篇日记的豆列
······下次自动登录
现在的位置:
& 综合 & 正文
Uploadify 上传后的文件删除，上传队列无法更新问题
在做多文件上传时, 对已上传的文件进行删除cancel 操作, 不会触动cancel方法. 也不会改变uploadify里的上传数目.
导致限制5个文件上传, 已上传5个, 然后待其上传完后删除一个, 正常情况肯定还可以继续传一个. 但这个bug导致会提示上传达到数目限制.
还是OSC好, 搜到答案了.
1. 定义一个上传限制数量 var uploadLimit = 3;
2. 点击页面的删除图片成功后，将uploadLimit++操作
3. 通过uploadify的settings方式重置上传限制数量,例如
$('#file_upload').uploadify('settings','uploadLimit', ++uploadLimit);
==========================
我们不管队列里数目多少, 不管他又没有操作队列. 只保证可上传数目为我们的目标值.
即: 每次删掉一个上传完成的文件后, 我们给限定额加1 .
uploadify中文文档地址：
&&&&推荐文章:
【上篇】【下篇】