您的位置:首页 > Web前端 > JQuery

基于jquery的上传插件Uploadify的API中文说明及例题

2013-04-08 10:15 169 查看
以下附上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属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rardocpdf文件”,打开文件选择框效果如下图:  fileExt:设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar'。  sizeLimit:上传文件的大小限制。  simUploadLimit:允许同时上传的个数默认值:1。  buttonText:浏览按钮的文本,默认值:BROWSE。  buttonImg:浏览按钮的图片的路径。  hideButton:设置为true则隐藏浏览按钮的图片。  rollover:值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。  width:设置浏览按钮的宽度,默认值:110。  height:设置浏览按钮的高度,默认值:30。  wmode:设置该项为transparent可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。默认值:opaque。  cancelImg:选择文件到文件队列中后的每一个文件上的关闭按钮图标Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。以下是我用到的代码,可以参考一下:使用例子:
复制代码<scripttype="text/javascript">$(document).ready(function(){$("#uploadify").uploadify({'uploader':'images/uploadify.swf','script':'<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do','cancelImg':'images/cancel.png','folder':'/','queueID':'fileQueue','fileDataName':'uploadify','fileDesc':'支持格式:xls.','fileExt':'*.xls','auto':false,'multi':true,'height':20,'width':50,'simUploadLimit':3,//'buttonText':'fdsfdsf...','buttonImg':'images/browse.jpg',//'hideButton':true,//'rollover':true,'wmode':'transparent',onComplete:function(event,queueID,fileObj,response,data){$('<li></li>').appendTo('.files').text(response);},onError:function(event,queueID,fileObj){alert("文件:"+fileObj.name+"上传失败");}//onCancel:function(event,queueID,fileObj)//{//alert("取消文件:"+fileObj.name);//}});
2、
复制代码<scripttype="text/javascript">$(document).ready(function(){$("#uploadify").uploadify({'uploader':'images/uploadify.swf','script':'<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do','cancelImg':'images/cancel.png','folder':'/','queueID':'fileQueue','fileDataName':'uploadify','fileDesc':'支持格式:xls.','fileExt':'*.xls','auto':false,'multi':true,'height':20,'width':50,'simUploadLimit':3,//'buttonText':'fdsfdsf...','buttonImg':'images/browse.jpg',//'hideButton':true,//'rollover':true,'wmode':'transparent',onComplete:function(event,queueID,fileObj,response,data){$('<li></li>').appendTo('.files').text(response);},onError:function(event,queueID,fileObj){alert("文件:"+fileObj.name+"上传失败");}//onCancel:function(event,queueID,fileObj)//{//alert("取消文件:"+fileObj.name);//}});
3.2版本<!--jQuery上传插件Uploadify3.2使用
2012年10月23日admin发表评论阅读评论
我今天介绍的Uploadify3.2的,以前旧版本的并不适用,说到这个,我就火大,我也是第一次使用,也百度了下使用手册,结果坑爹的那些手册都是旧版的,新版的Uploadify接口和旧版的差太多了。废话不多说,进入正题。
Uploadify下载地址:http://www.uploadify.com/download/这里下载最新版的3.2的。
下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。
在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如-->*/$(function(){
/*$("#file_upload").uploadify({
height:30,
swf:'/uploadify.swf',
uploader:'/uploadify.php',
width:120
});
});
*/
/*file_upload_1其实也就是一个容器ID,比如<divid=”file_upload_1″></div>,上面的只是简单的事例,下面我就把我在项目中做的发出来,每个都有解释:
$(document).ready(function(){
$("#file_upload").uploadify({
//开启调试'debug':false,
//是否自动上传'auto':false,
//超时时间'successTimeout':99999,
//附带值'formData':{
'userid':'用户id',
'username':'用户名',
'rnd':'加密密文'
},
//flash'swf':"uploadify.swf",
//不执行默认的onSelect事件'overrideEvents':['onDialogClose'],
//文件选择后的容器ID'queueID':'uploadfileQueue',
//服务器端脚本使用的文件对象的名称$_FILES个['upload']'fileObjName':'upload',
//上传处理程序'uploader':'imageUpload.php',
//浏览按钮的背景图片路径'buttonImage':'upbutton.gif',
//浏览按钮的宽度'width':'100',
//浏览按钮的高度'height':'32',
//expressInstall.swf文件的路径。'expressInstall':'expressInstall.swf',
//在浏览窗口底部的文件类型下拉菜单中显示的文本'fileTypeDesc':'支持的格式:',
//允许上传的文件后缀'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
//上传文件的大小限制'fileSizeLimit':'3MB',
//上传数量'queueSizeLimit':25,
//每次更新上载的文件的进展'onUploadProgress':function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
//有时候上传进度什么想自己个性化控制,可以利用这个方法//使用方法见官方说明},
//选择上传文件后调用'onSelect':function(file){

},
//返回一个错误,选择文件的时候触发'onSelectError':function(file,errorCode,errorMsg){
switch(errorCode){
case-100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");
break;
case-110:
alert("文件["+file.name+"]大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
break;
case-120:
alert("文件["+file.name+"]大小异常!");
break;
case-130:
alert("文件["+file.name+"]类型不正确!");
break;
}
},
//检测FLASH失败调用'onFallback':function(){
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
//上传到服务器,服务器返回相应信息到data里'onUploadSuccess':function(file,data,response){
alert(data);
}
});
});
大体上常用的我想也就这些,至于后端处理上传部分,我这里就不多讲了,和普通的文件上传处理方式是一样的。
*/

















                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: