Uploadify 使用说明
跟我学uploadify插件的应用实例——uploadify插件相关的事件功能说明及应用示例
1.1
跟我学 uploadify 插件的应用实例——uploadify 插件相关的事件功能
说明及应用示例
1.1.1 uploadify 插件相关的事件及功能说明 1、onCancel 函数 设置 onCancel 选项,在文件上传被取消时,将允许运行一个自定义的函数。该函数需 要定义一个 file 参数,代表被取消的上传文件。下面为代码示例: $(function() { $(#39;).uploadify({ 'auto' 'swf' : false, : '/uploadify/uploadify.swf',
'onClearQueue' : function(queueItemCount) { alert(queueItemCount + ' 个文件已经从上传文件队列中被移除!'); }
1 杨教授工作室,版权所有,盗版必究, 1/15 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
}); }); 3、onDestroy 函数 销毁 Uploadify 实例(调用 destroy 方法)时触发该事件,函数不带参数。下面为代码 示例: $(function() { $('#uploadifyFileInputTagID').uploadify({ 'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php', 'onDestroy' : function() { alert('上传的文件已经被删除!'); } }); }); 4、onDialogClose 函数 当浏览文件对话框关闭时触发该事件。如果该事件被添加到 overrideEvents 属性中,在 添加文件到队列中发生错误时,将不会弹出默认的错误信息。该函数必须要定义一个对象 类型并且对象名称为 queueData 的参数,queueData 参数包含有如下的成员属性: 1)filesSelected 文件选择对话框中共选择了多少个文件。 2)filesQueued 已经向上传的文件队列中添加了多少个文件。 3)filesReplaced 已经向上传的文件队列中替换了多少个文件。 4)filesCancelled 取消了多少个文件。 5)filesErrored 出错了多少个文件。 下面为代码示例: $(function() {
Uploadify属性和方法说明文档
Uploadify 是一个JQuery插件,它协助你轻松简单的将一个或多个文件上传至你的网站。
它需要Flash控件和后台开发语言的支持,丰富的参数配置,同时也简单易用,让你轻松上手。
官方网站:/官方示例:/demo/开发文档:/documentation/插件下载:/download/·参考文献(PS:我是在这篇文章里知道这世界上有这样一个插件的^_^ 里面有后台C#代码)易用的JQuery上传插件Uploadify/jquery-muti-file-upload-uploadify/·参数uploader设置uploadify.swf文件的相对或绝对路径。
默认值:'uploadify.swf'script设置用于处理文件上传的后台程序页面的相对或绝对路径。
默认值:'upload.php'checkScript设置用于检查规则的后台程序页面的相对或绝对路径。
scriptData一个键值对应的数据,它将连同文件一起传给后台程序页面。
示例:{'name':'value'}fileDataNamemethod设置scriptData提交的方式。
可选值:GET,POST 默认值:'POST'scriptAccess设置Flash的访问模式。
如果是本地测试,可设置为'always'。
默认值:'sameDomain'folder设置文件保存的目录。
不能以'/'结束。
queneID设置文件队列里的元素的ID,默认情况下,在点击浏览按钮后自动创建。
queueSizeLimit设置文件队列的最大值。
默认值:999multi设置为true表示允许上传多个文件。
auto设置为true表示当选择一件附件后,自动开始上传。
fileDesc设置文件浏览对话框中的文件类型下拉框的显示文本。
Uploadify中文最新API
byte[] buf = new byte[1024];
for (int readNum; (readNum = ins.read(buf)) != -1;) {
out.write(buf, 0, readNum);
}
out.close();
ins.close();
}
public File getUpload() { return upload;
参数: queueData 包含: uploadsSuccessful:上传成功的数量 uploadsErrored:上传返回错误的数量
onSelect 说明: 在选择的每一个文件被添加到队列前触发
示例: 'onSelect' : function(file) { alert('The file ' + + ' was added to the queue.'); }
}
public void setUpload(File upload) { this.upload = upload;
}
public String getUploadFileName() {
return uploadFileName; }
public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName;
queueID
上传队列的 DOM 元素的 ID 号,设置了 queueID,那么选择多个文件上传后,就能 看到实时的队列情况
queueSizeLimit
队列长度限制
999
removeCompleted
uploadify使用详解.docx
uploadify函数的参数为json格式,可以对json对象的key值的修改来进行自定义的设置,如multi设置为true或false来控制是否可以进行多文件上传,下面就来介绍下这些key值的意思:uploader:uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。
script:后台处理程序的相对路径。
默认值:uploadify.phpcheckScript:用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径fileDataName:设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。
默认为Filedatamethod:提交方式Post 或Get 默认为PostscriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomainfolder :上传文件存放的目录。
queueID :文件队列的ID,该ID与存放文件队列的div的ID一致。
queueSizeLimit :当允许多文件生成时,设置选择文件的个数,默认值:999 。
multi :设置为true时可以上传多个文件。
auto :设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传。
fileDesc :这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:fileExt :设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit :上传文件的大小限制。
simUploadLimit :允许同时上传的个数默认值:1 。
buttonText :浏览按钮的文本,默认值:BROWSE 。
buttonImg :浏览按钮的图片的路径。
Uploadifive使用教程【结合七牛】
Uploadifive使⽤教程【结合七⽜】Uploadify是⼀个基于JQuery的多⽂件上传JS组件,⾼度定制,两个版本可供选择。
flash版本在最新的Safari等不再⽀持flash的浏览器或者⼀些⼿机浏览器中就⽆法正常的加载使⽤,因此推荐使⽤html5版本!优点:⽀持多⽂件上传⽀持进度条显⽰⽀持拖拽上传⽀持⽂件格式检查及⼤⼩限制⽀持在⽂件上传的各个⽣命周期对⽂件进⾏处理Uploadify两个版本⼀个为flash版(免费),⼀个为HTML5版(收费$5.00 USD,还有⼀个⽤户商业⽤途的就⽐较贵了)基本使⽤:环境要求: jQuery1.4或以上的版本;⼀个能解析php、等类似的服务器端脚本语⾔的服务器运⾏环境。
1. 下载uploadifive压缩⽂件解压⾄你的项⽬⽬录2. 引⼊相关js、css⽂件:<link rel="stylesheet" type="text/css" href="uploadifive.css"><script src="/jquery.js" type="text/javascript"></script><script src="jquery.uploadifive.js" type="text/javascript"></script>3. 页⾯中添加type="file"的⼀个input,并且指定id<input id="file_upload" type="file" name="file_upload" />4. 初始化uploadfive,绑定到id为file_upload的input上$(function() {$('#file_upload').uploadifive({//处理⽂件上传的服务器端脚本,可根据⾃⼰的项⽬环境修改'uploadScript' : 'uploadifive.php'// Put your options here});});Options选项参数对常⽤参数进⾏解释auto:是否⾃动触发上传,如果选择false需要⼿动触发通过调⽤:$('#file_upload').uploadifive('upload')buttonText:指定上传按钮⽂字checkScript:指定检查⽂件名是否重复的服务器端脚本dnd:是否允许拖动上传,如果为false则禁⽤拖动上传fileObjName:服务器端获取的⽂件对象的名称,如php的 $_FILES['fileObjName']fileSizeLimit:限制上传⽂件的⼤⼩【单位KB,MB,GB】fileType:上传⽂件类型:如图⽚ image/*,如果指定了类型限制,点击上传弹出的资源选择器中,⾮限定的⽂件类型将⽆法不选择formData:额外提交的表单数据可以在这个参数下指定{'someKey' : 'someValue'}height|width:上传按钮的宽度与⾼度只能通过这两个属性进⾏修改multi:是否多⽂件上传[true|false]Events回调⽅法onAddQueueItem:当⽂件添加⾄上传队列中时触发此回调⽅法$(function() {$('#file_upload').uploadifive({'uploadScript' : '/uploadifive.php','onAddQueueItem' : function(file) {alert('The file ' + + ' was added to the queue!');}});});onCancle:当点击取消上传,从上传队列中移除⽂件对象时触发$(function() {$('#file_upload').uploadifive({'uploadScript' : '/uploadifive.php','onCancel' : function() {alert('The file ' + + ' was cancelled!');}});});onUpload:当调⽤upload⽅法⼿动触发上传是触发⼀次onUploadFile:在每个⽂件准备开始上传时触发⼀次【这个回调⽅法存在⼀个bug,见下⽂】$(function() {$('#file_upload').uploadifive({'uploadScript' : '/uploadifive.php''onUploadFile' : function(file) {alert('The file ' + + ' is being uploaded.');}});});onProgress:⽂件上传过程中不断的触发,因此你可以在此回调⽅法中定制你的上传进度等信息$(function() {$('#file_upload').uploadifive({'uploadScript' : '/uploadifive.php''onProgress' : function(file, e) {if (e.lengthComputable) {var percent = Math.round((e.loaded / e.total) * 100);}file.queueItem.find('.fileinfo').html(' - ' + percent + '%');file.queueItem.find('.progress-bar').css('width', percent + '%');}});});onUploadComplete:⽂件上传完成时触发回调参数 file:上传完的⽂件对象;data:服务器端(uplodify.php)返回的信息$(function() {$('#file_upload').uploadifive({'uploadScript' : '/uploadifive.php''onUploadComplete' : function(file, data) {alert('The file ' + + ' uploaded successfully.');}});});onFallback:初始化时检查浏览器是否⽀持HTML5onError:在⽂件添加到上传队列或者在上传的过程中发⽣错误的回调函数errorType类型见Methods直接调⽤的⽅法debug:⽐较有⽤的debug⽅法,可以在控制台打印出上传的相关信息<a href="javascript:$('#file_upload').uploadifive('debug')">Debug</a>与七⽜结合直接上传⽂件到七⽜云存储注:上传到七⽜需要对⼏个参数进⾏修改1. 七⽜可以接受的fileObjName的名称是file2. 表单数据中必须包含上传token[token有服务器端返回]3. 表单数据中指定上传的key,作为七⽜空间中存储的⽂件名4. uploadScript指定为:以上2,3两项数据的传递需要修改formData选项,如果是单个⽂件上传,这样是没有问题的,如果是多⽂件上传的情况,第⼀个⽂件正常上传成功,当上传第⼆个时,就会返回⼀个错误状态码614,即⽂件已存在。
uploadify 3.1 使用详解
uploadify 3.1 使用详解(2012-07-24 18:56:24)<html><head><title>My Uploadify Implementation</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="uploadify.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script><script type="text/javascript">$(function () {$('#file_upload').uploadify({'debug': true, //是否开启调试模式'auto': false, //是否自动上传'multi': false, //是否允许多个上传'removeCompleted': false, //上传完毕上传列表是否去除'progressData': 'percentage', //进度percentage或speed'buttonText': 'BROWSE...', //flash按钮文字// 'formData' : {'id':'测试','af':'ddd'}, //表单数据json格式'method': 'post', //提交方法post或get'fileSizeLimit': '50MB', //上传文件大小设置单位可以是B、KB、MB、GB// 'fileTypeDesc' : 'description', //弹窗选择文件框类型处提示// 'fileTypeExts' : '*.gif; *.jpg; *.png; *.zip', //文件类型'swf': 'uploadify.swf', //swf位置'width': 300, //flash按钮宽度// 'height' : 100, //flash按钮高度'uploader': 'uploadify.php', //提交到的处理页面'uploadLimit': 1, //上传个数限制'onUploadComplete': function (file) { //上传完成时事件alert('The file ' + + ' finished processing.');$('#file_upload').uploadify('disable', true); //设置上传按钮不可用},'onUploadError': function (file, errorCode, errorMsg, errorString) { //错误提示alert('The file ' + + ' could not be uploaded: ' + errorString);}// Your options here});});function changeBtnText() {$('#file_upload').uploadify('settings', 'formData', { 'id': '测试', 'af': 'ddd' }); //settings可以设置上面各种参数也。
jquery上传插件Uploadify3.2中文详细参考手册
� onUploadProgress
每个文件上传后更新一次进度信息。参数如下:
• file The file object being uploaded • bytesUploaded The number of bytes of the file that have been uploaded
• bytesTotal The total number of bytes of the file • totalBytesUploaded The total number of bytes uploaded in the current upload operation (all files) • totalBytesTotal The total number of bytes to be uploaded (all files)
� height
表示按钮的高度,默认30PX。若要改为50PX,如下设置: height‘:50,
� method
默认是’post’,也可以设置为’get’
� multi
是否支持多文件上传,默认为true
� overrideEvents
Uploadify插件里面有一些事件,该参数意义就是设置哪些事件可以被用户 覆写。若进行如下设置:
� onUploadStart
在一个文件开始上传之前触发。
� onUploadSuccess
在每一个文件上传成功后触发 参数如下:
•file The file object that was successfully uploaded • data The data that was returned by the server-side script (anything that was echoed by the file) • response The response returned by the server — true on success or false if no response. If false is returned, after the successTimeout option expires, a response of
3.2版uploadify详细例子(含FF和IESESSION问题)
3.2版uploadify详细例⼦(含FF和IESESSION问题)最近做项⽬中碰到上传需要显⽰进度的问题,通过uploadfiy很好的解决了这个问题不过(IE9出现了按钮不能点击的问题,⾄今仍找不到良策)在使⽤uploadfiy3.2版本时需要下载$("#uploadify").uploadify({'uploader': '/LZKS/Handler/BigFileUpLoadHandler.ashx','swf': '/LZKS/Scripts/uploadify/uploadify.swf','cancelImage': '/LZKS/Scripts/uploadify/cancel.png','queueID': 'fileQueue',//'auto': false,'multi': true,'buttonText': '⽂件上传','formData': { 'ASPSESSID': ASPSESSID, 'AUTHID': auth },'onSelect': function (file) {$('#uploadify').uploadifySettings('formData', { 'ASPSESSID': ASPSESSID, 'AUTHID': auth });alert(formDate);},'onComplete': function (file, data, response) {},'onQueueComplete': function () {alert("上传完成!");$('#fileQueue').attr('style', 'visibility :hidden');},'onSelectError': function (file, errorCode, errorMsg) {$('#fileQueue').attr('style', 'visibility :hidden');},'onUploadStart': function (file) {$('#fileQueue').attr('style', 'top:200px;left:400px;width:400px;height :400px;visibility :visible');}});});⽤uplodify上传还有⼀个⼩问题就是在FF下session将会出现丢失的情况,在Gobal中加⼊如下代码来将上传过程中定义的session传⾄服务器上protected void Application_BeginRequest(object sender, EventArgs e){/* we guess at this point session is not already retrieved by application so we recreate cookie with the session id... */try{string session_param_name = "ASPSESSID";string session_cookie_name = "_SessionId";if (HttpContext.Current.Request.Form[session_param_name] != null){UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);}else if (HttpContext.Current.Request.QueryString[session_param_name] != null){UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);}}catch{}try{string auth_param_name = "AUTHID";string auth_cookie_name = FormsAuthentication.FormsCookieName;if (HttpContext.Current.Request.Form[auth_param_name] != null){UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);}else if (HttpContext.Current.Request.QueryString[auth_param_name] != null){UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);}}catch{}}private void UpdateCookie(string cookie_name, string cookie_value){HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);if (null == cookie){cookie = new HttpCookie(cookie_name);}cookie.Value = cookie_value;HttpContext.Current.Request.Cookies.Set(cookie);}在JS加载前⾯定义下⾯两个变量var auth = "<% = Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value %>"; var ASPSESSID = "<%= Session.SessionID %>";Handler⽂件代码如下:public class BigFileUpLoadHandler : IHttpHandler, IRequiresSessionState{DALFile Fdal = new DALFile();public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";VideoUpLoad(context, .Globe.filename);}public void VideoUpLoad(HttpContext context, string fileFolderName){context.Response.Charset = "utf-8";string aaaaaaa=context.Request.QueryString["sessionid"];HttpPostedFile file = context.Request.Files["Filedata"];string uploadPath = HttpContext.Current.Server.MapPath(UploadFileCommon.CreateDir(fileFolderName));if (file != null){if (!Directory.Exists(uploadPath)){Directory.CreateDirectory(uploadPath);}Model.ModelFile model = new Model.ModelFile();model.File_ID = Guid.NewGuid().ToString();model.File_Name = file.FileName;model.File_Path = UploadFileCommon.CreateDir(fileFolderName);model.File_Size = file.ContentLength;model.File_Extension = file.FileName.Substring(stIndexOf('.') + 1);model.File_Date = DateTime.Now;model.File_CurrentMan = ;file.SaveAs(uploadPath + model.File_Name);List<Model.ModelFile> list = null;if (context.Session["File"] == null){list = new List<Model.ModelFile>();}else{list = context.Session["File"] as List<Model.ModelFile>;}list.Add(model);context.Session.Add("File", list);}else{context.Response.Write("0");}}//这段代码的功能是将多⽂件的信息存到context.Session["File"] as List<Model.ModelFileModel.ModelFile>为⽂件信息类//实现批量上传的信息给Session。
uploadfy 中文手册
Uploadify在线中文手册说明:手册由油灯网@九霄云仙基于Uploadify v3.2(Flash-Based Multiple File Uploader )翻译。
部署在部署一个Uploadify实例前,请确保满足最低要求:∙ 1.jQuery 1.4.x 或更高版本∙ 2.Flash Player 9.0.24 或更高版本∙ 3.支持PHP, , Cold Fusion的服务器环境(官方默认支持PHP)下载最新版本的uploadify,解压到服务器根目录下的uploadify文件夹中,你可以看到以下文件:∙Change Log.txt(uploadify的升级日志,部署时删掉)∙check-exists.php(用来检查上传目标文件夹里是否存在相同文件)∙index.php(官方实例)∙jquery.uploadify.js(上传插件)∙jquery.uploadify.min.js(压缩版的上传插件,部署时使用)∙license.txt(许可证文件,部署时删掉)∙uploadify.css(上传控件样式表)∙uploadify.php(上传数据处理文件)∙uploadify.swf(flash基础文件)∙uploadify-cancel.png(取消按钮图片)在官方提供的实例文件中,是引用的jquery官方网站上的jquery库,有需要的朋友还需要本地引用jquery库。
下面我们看一看如何在你的项目上部署uploadify:1.我们假定上传控件部署在网站根目录下的upload.php中,uploadify文件夹位于网站根目录中,上传的文件保存在根目录下的upload文件夹中,uploadify文件夹中包含check-exists.php、jquery.min.js 、jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify- cancel.png。
jquery上传插件Uploadify3.2中文详细参考手册
� onDialogOpen
选择文件对话框打开时触发。
� onDisable
禁用Uploadify时触发(通过disable方法)
� onEnable
使能Uploadift时触发
� onFallback
没有兼容的FLASH时触发
� onInit
每次初始化一个队列时触发
� onQueueComplete
� onSWFReady
FLASH对对象加载成功后触发
� onUploadComplete
上传文件成功后触发(每一个文件都触发一次)
� onUploadError
上传文件失败触发,参数如下:
•file The file object that was uploaded •errorCode The error code that was returned •errorMsg The error message that was returned • errorString The human-readable error message containing all the details of the error
• filesCancelled The number of files that were cancelled from being added to the queue
(not replaced)
• filesErrored The number of files that returned an error
1. Uploadify配置选项: 1.Uploadify
� auto 类型:Boolen 缺省值:true 说明:表示在选择文件后是否自动上传 � buttonClass 说明:额外增加的上传按钮样式类型 � buttonCursor 说明:上传按钮Hover时的鼠标形状,默认值是’hand’ � buttonImage 说明:按钮的背景图片,默认为NULL �l buttonText 说明:按钮上显示的文字,默认”SELECT FILES” �l checkExisting 说明:默认是false,若要检查可指明一个用于判断的脚本的路径,比如: ‘checkExisting’ : ’/uploadify/check-exists.php’ �l debug 说明:开启DEBUG模式,默认False � fileObjName 说明:文件对象名称。用于在服务器端获取文件。比如,把该属性设置为’ myFile’,那么在PHP中获取该文件的方法是:$_FILES[‘myFile’],该属性的缺 省值为: ‘Filedata’
jqueryuploadify文件上传插件用法精析
jqueryuploadify⽂件上传插件⽤法精析jquery uploadify⽂件上传插件⽤法精析CreationTime--2018年8⽉2⽇11点12分Author:Marydon⼀、参数说明1.参数设置$("#file_upload").uploadify({height : 30,//⾼度swf : '/uploadify/uploadify.swf',//指定swf⽂件uploader : '/uploadify/uploadify.do',//后台处理的urlwidth : 120,//宽度buttonText: '上传图⽚', //按钮显⽰的⽂字fileTypeExts: '*.*',//上传⽂件的类型,多个类型使⽤;分割'*.gif; *.jpg; *.png',默认值为:'*.*'fileTypeDesc: 'Image Files',//这个属性值必须设置fileTypeExts属性后才有效,⽤来设置选择⽂件对话框中的提⽰⽂本,默认值为:All FilesformData: {'someKey':'someValue','someOtherKey':1},//发送给后台的其他参数通过formData指定queueID: 'fileQueue',//可以为DOM元素的id,设置队列样式, 默认值为false,队列id动态⽣成,不带#auto: true,//选择⽂件后⾃动上传,默认值为:truemulti: true,//设置为true将允许多⽂件上传,默认值为:truebuttonClass:'xttblog',//上传按钮的样式buttonImage:'',//按钮的图⽚路径buttonCursor:'hand',//⿏标指针悬停在按钮上的样⼦,默认值为:handcheckExisting:'/uploadify/check-exists.do',//⽂件的路径,检查⽬标⽂件夹中是否已上载的⽂件的名称.如果⽂件名不存在,该脚本将返回1,如果⽂件名存在或0,默认值为falsedebug:true,//打开swfupload调试模式,默认值为:falsefileObjName:'Filedata',//后台可以通过这个名字获取到⽂件对象,默认值为:FiledatafileSizeLimit:'',//允许⽂件上传的最⼤⼤⼩.这个值可以是数字或字符串.如果它是⼀个字符串,它接受⼀个单位(B,KB,MB,GB),默认单位为KB。
跟我学uploadify插件的应用实例——uploadify插件相关的方法功能说明及应用示例
1.1跟我学uploadify插件的应用实例——uploadify插件相关的方法功能说明及应用示例1.1.1uploadify插件相关的方法及功能说明1、cancel(1)主要的功能该方法的主要功能是实现从上传的文件队列中取消正在上传的文件,而不管此任务是否已经开始上传。
如果在调用cancel方法时没有给出参数,则取消上传的文件队列中的第1个文件;而如果给出“*”参数,则将取消上传的文件队列中的所有的上传文件。
(2)cancel(fileID, suppressEvent) 方法的两个参数的含义1)fileID代表要取消的上传文件的ID,如果为空则取消队列中第一个任务,如果为'*'则取消所有任务。
2)suppressEvent是否阻止触发onUploadCancel事件,当清空队列时非常实用。
(3)应用示例假定在页面中有如下的上传文件的表单按钮,该按钮的id属性为uploadifyFileInputTagID<input id="uploadifyFileInputTagID" name="uploadifyFileInputTagName"type="file" multiple="true"> 则在如下的两个超链接中调用cancel方法分别实现了“清除第1个上传的文件”和“清除上传的文件队列中所有文件”的两个不同的功能:<a href="javascript:$('#uploadifyFileInputTagID').uploadify('cancel')">清除第1个上传的文件</a><a href="javascript:$('#uploadifyFileInputTagID').uploadify('cancel','*')">清除上传的文件队列中所有文件</a>如下示图为某个Web应用系统中对将要上传的文件的上传状态加以取消的结果状态示图。
uploadify文件批量上传
JQuery上传插件Uploadify使用详解Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示。
如何使用:1 从官网下载最新的版本,并解压。
2 创建Web项目,命名为uplodify。
3 将commons-io-1.4.jar、commons-fileupload-1.2.jar放到WEB-INF/lib目录下4 在项目中创建css、images、js文件夹,将解压包中相应文件拷贝到相应的文件夹。
5 在项目中添加test.jsp作为文件的上传页面。
6 在项目中添加uploadDoc.jsp文件用来处理文件的上传。
7 在项目中添加uploads文件夹,用来存放上传的文件。
一、进行完上面七步后项目的基本结构如下图:二、test.jsp的代码如下:<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><title>文件批量上传</title><meta http-equiv="pragma"content="no-cache"><meta http-equiv="cache-control"content="no-cache"><meta http-equiv="expires"content="0"><link href="<%=request.getContextPath()%>/css/default.css"rel="stylesheet"type="text/css"/><link href="<%=request.getContextPath()%>/css/uploadify.css"rel="stylesheet"type="text/css"/><script type="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"src="<%=request.getContextPath()%>/js/swfobject.js"></script> <script type="text/javascript"src="<%=request.getContextPath()%>/js/jquery.uploadify.v2.1.0.min.js" ></script><script type="text/javascript">$(document).ready(function() {$("#uploadify").uploadify({'uploader' : 'js/uploadify.swf','script' : 'uploadDoc.jsp','cancelImg' : 'images/cancel.png','folder' : 'uploads','queueID' : 'fileQueue','fileDesc' : '请选择doc,docx,xls,xlsx文件','fileExt' : '*.doc;*.docx;*.xls;*.xlsx','sizeLimit' : 1024*1024*10,'auto' : false,'multi' : true,'simUploadLimit' : 2,'buttonText' : 'BROWSE'});});</script></head><body><div id="fileQueue"></div><input type="file"name="uploadify"id="uploadify"/><br><br> <p><ahref="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a><ahref="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有</p></body></html>三、uploadDoc.jsp的代码如下:<%@page language="java"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@page import="mons.fileupload.*"%><%@page import="mons.fileupload.servlet.*"%><%@page import="mons.fileupload.disk.*"%><%@page import="java.util.*"%><%@page import="java.io.*"%><%String savePath =this.getServletConfig().getServletContext().getRealPath("");// 得到项目的工作目录savePath = savePath + "/uploads/";File f1 = new File(savePath);// 如果没有的话就创建目录if (!f1.exists()) {f1.mkdirs();}DiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac); upload.setHeaderEncoding("utf-8");List fileList = null;try {fileList = upload.parseRequest(request);} catch (FileUploadException ex) {return;}Iterator<FileItem> it = fileList.iterator();String name = "";String extName = "";while (it.hasNext()) {FileItem item = it.next();if (!item.isFormField()) {// 解析文件name = item.getName();long size = item.getSize();String type = item.getContentType();if (name == null || name.trim().equals("")) {continue;}// 得到文件的扩展名if (stIndexOf(".") >= 0) {extName = name.substring(stIndexOf("."));}File file = null;do {file = new File(savePath + name + extName);} while (file.exists());File saveFile = new File(savePath + name + extName);try {item.write(saveFile);} catch (Exception e) {e.printStackTrace();}}}response.getWriter().print(name + extName);%>四、运行之后效果图如下:五、选择了三个文件后,点击开始上传,就可以看到uploads文件夹中会增加这两个文件。
thinkphp jquery uploadify插件上传单张图片-
ThinkPHP + JQuery + uploadify插件上传单张图片-问题提出:项目中要编辑用户信息,其中需要上传用户的头像图片。
实际操作流程:进入用户信息编辑页面=>>填写用户信息=>>上传用户头像图片=>>保存用户信息。
uploadify上传头像是异步上传,上传后头像图片数据保存在img表中,用户信息表info中保存img的id。
问题:一、使用ThinkPHP + uploadify异步上传图片;二、如果用户头像已经存在,则要先删除用户原来的头像数据,包括img表中的数据以及服务器上面的图片文件;三、如果操作中,上传了多次头像,则每次上传都先删除上一次上传的头像;四、图片上传完成后,在页面显示图片的缩略图;五、返回表img的id,保存到表info中;解决:引入jquery与uploadify文件及其他要用到的插件:<scriptsrc="../Public/assets/js/libs/jquery-1.8.3.min.js"></script><!-- Uploadify 上传插件--><scriptsrc="../Public/plugins/uploadify/jquery.uploadify.js"></scr ipt><!-- msgBox 信息弹出插件--><scriptsrc="../Public/plugins/msgbox/jquery.msgbox.min.js"></s cript><!-- Url 获取URL地址参数的插件--><script src="../Public/plugins/url/url.min.js"></script>上传表单:<div class="control-group"> <labelclass="control-label">头像</label> <divclass="controls"> <img alt="您还没有上传头像" src="__ROOT__{$wx.avatar}">//上传成功的头像缩略图将在这里显示<input type="hidden"name="wx[avatarid]" value="">//接收上传成功后的数据表img的id <input type="file" id="wx-avatar">//上传点击按钮</div></div>JS代码:$(function(){var swfurl = "../Public/plugins/uploadify/";var uploaderurl = "{:U('uploadavatar')}";var sessionid = "{:session_id()}";var __root__ = "__ROOT__";$('#wx-avatar').uploadify({swf : swfurl + 'uploadify.swf',//swf文件路径uploader : uploaderurl + "?wxid=" + url('?wxid'), // 服务器端接收处理文件上传的地址,这里使用url插件取得地址栏里面的用户ID,并发送到服务器端// Optionsauto : true, // 文件添加到队列后自动上传buttonText : '点击上传头像图片', // 上传按钮上面的文字fileSizeLimit : '2 MB', // 上传文件的大小限制,可以使用B\KB\MB\GB单位,填0表示不限制。
Uploadify3.1与2.1.4参数详解
Uploadify3.1与Uploadify2.1.4属性详细说明Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。
官方提供的实例是php版本的,您可以点击下面的链接进行浏览或下载。
∙官方下载∙官方文档∙官方演示这里详细描述了Uploadify3.1与2.1.4的所有属性、事件及方法Uploadify3.1属性:属性名类型默认值说明auto Boolean True 添加到队列后是否自动上传buttonClass String Empty String 为Uploadify按钮添加一个类名buttonCursor String“hand”鼠标移上浏览按钮显示的鼠标样式两个值:arrow(箭头)、hand(手形)buttonImage String Null “浏览”按钮的背景图像的路径。
如果使用默认的样式,你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。
)buttonText String“SELECT FILES”显示在浏览按钮上的文本。
注:若没有修改uploadify.swf的字体和uploadify.js文件的编码方式,使用中文将会是乱码checkExisting StringDebug Boolean False 设置为True打开SWFUpload调试模式。
fileObjName String“Filedata”在服务器端接收文件的Form表单键名fileSizeLimit Number0允许上传文件的最大大小。
这个值可以是一个数字或字符串。
如果它是一个字符串,它接受一个单位(B, KB,MB,or GB)。
默认单位为KB。
您可以将此值设置为0,没有限制。
fileTypeDesc String“All Files”可选的文件的说明。
此字符串将出现在浏览文件对话框的文件类型下拉框中。
fileTypeExts String“*.*”允许上传的文件扩展名。
Uploadify上传文件方法
Uploadify上传⽂件⽅法Uploadify是JQuery的⼀个上传插件,实现的效果⾮常不错,带进度显⽰。
不过官⽅提供的实例时php版本的,本⽂将详细介绍Uploadify在Aspnet中的使⽤,您也可以点击下⾯的链接进⾏演⽰或下载。
先给⼤家展⽰下效果图:修改:报找不到uploadify-cancel.png⽂件。
找到uploadify.css,找到.uploadify-queue-item .cancel a {,修改⽂件的路径。
好多⼈都说,在chrome、Firefox上使⽤uploadify的时候获取不到session导致上传出错。
需要⼿⼯将session id⽅法附加参数中。
但是我这⾥并没有这么做,并且在chrome、Firefox上传没问题,不知道为什么,也许是因为我⽤的最新版的原因吧。
要点:uploadify的js配置已经⽐较全⾯,在实际使⽤的时候可以适当的删减⼀些⽅法和属性。
⼀般情况下的单⽂件上传只考虑onSelect、onUploadError和onUploadSuccess即可。
如果是多⽂件上传,那么在单⽂件上传的基础上再加上对整个队列的监听onQueueComplete。
开始上传所有⽂件:$('#file_upload').uploadify('upload', '*');取消上传:$('#file_upload').uploadify('cancel', parm);parm为空:取消上传第⼀个⽂件。
parm为'*':取消所有的上传⽂件。
parm为file id:取消该file id对应的⽂件。
修改附加的⼀些变量:$('#file_upload').uploadify("settings","formData",{"name1":"中⽂name","parm1":"修改后的参数"});参数为json,如果该json中的某个变量已经有了,那么覆盖该属性,如果没有,那么追加该属性。
jQuery 异步上传插件 Uploadify 使用 (Java平台)
本文由我司收集整编,推荐下载,如有疑问,请与我司联系jQuery 异步上传插件Uploadify 使用(Java 平台)2013/10/12 20702 Uploadify 是JQuery 的一个上传插件,实现的效果非常不错,带进度显示。
而且是Ajax 的,省去了自己写Ajax 上传功能的麻烦。
不过官方提供的实例时php 版本的,本文将详细介绍Uploadify 在J2EE 中的使用。
1.引入头文件(注意一定要把jQuery 放在前面):注意:uploader 是上传的Action 路径名;formData 是传递给Action 的参数列表。
script src=“lib/jquery-1.8.3.min.js”/script scriptsrc=“lib/uploadify/jquery.uploadify.min.js”type=“text/javascript”/script script type=“text/javascript”$(function() { $(‘#projectfile’).uploadify({‘swf’:‘lib/uploadify/uploadify.swf’,‘uploader’: ‘ProjectfileAdd.action’,‘formData’:{‘projectid’:‘${project.id}’},‘fileObjName’: ‘file’,‘fileSizeLimit’: ‘0’,‘onQueueComplete’: function(queueData) { alert(queueData.uploadsSuccessful + ‘files were successfully uploaded.’); /script 2.需要上传的地方添加一个form ,里面有一个input (注意其id 属性):form input id=“projectfile”name=“file”type=“file” /input /form 3.看一下input 效果如下,还挺美观的4.后台的Action 就是一个普通的上传文件的Action,示例如下:package dc.action.projectfile;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import。
uploadify例子
uploadify例子以下是一个使用uploadify实现多文件上传的简单例子:HTML部分:```html<input type="file" name="file[]" multiple="multiple" /> <a href="" id="upload">上传</a>```JavaScript部分:```javascript$(document).ready(function() {$('upload').click(function() {$('file').uploadify({'url': '', // 上传文件的URL'fileTypeExts': '.jpg; .png; .gif', // 允许上传的文件类型 'fileSizeLimit': , // 文件大小限制(单位KB)'queueSizeLimit': 5, // 同时上传的文件数量限制'onUploadSuccess': function(file, data, response) {// 上传成功后的回调函数(data);},'onUploadError': function(file, errorCode, errorMsg) {// 上传失败后的回调函数(errorCode, errorMsg);}});});});```在这个例子中,我们使用了jQuery和uploadify插件。
首先在HTML中定义了一个文件输入框和一个上传按钮。
在JavaScript中,我们使用jQuery 的click事件监听器来绑定上传按钮的点击事件。
uploadify文件批量上传的校验
对上传的文档进行校验:$(document).ready(function() {$("#uploadify").uploadify({'uploader' : '../resources/uploadfile/js/uploadify.swf', //uploadify.swf 文件的相对路径,默认值:uploadify.swf// 'checkScript' :// '../resources/uploadfile/checkDoc.jsp?clno=101',// //用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径'script' : '../resources/uploadfile/uploadDoc.jsp', //后台处理程序的相对路径// 'scriptData' : {"clno" : $("#newclno").val()},// //传参,使用scriptData需要先设置'method' : 'GET''cancelImg' : '../resources/uploadfile/images/cancel.png', //选择文件到文件队列中后的每一个文件上的关闭按钮图标'folder' : '', //上传文件存放的目录,此处可以在后台认为设置// 'method' : 'Get', //提交方式Post 或Get 默认为Post'queueID' : 'fileQueue', //文件队列的ID,该ID与存放文件队列的div 的ID一致'fileDesc' : '请选择doc,docx,xls,xlsx文件', //这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本'fileExt' : '*.doc;*.docx;*.xls;*.xlsx', //设置可以选择的文件的类型,格式如:'*.doc;*.xls''queueSizeLimit' : 100, //当允许多文件生成时,设置选择文件的个数,默认值:999'auto' : false, //设置为true当选择文件后就直接上传了,为false 需要点击上传按钮才上传'multi' : true, //设置为true时可以上传多个文件'sizeLimit' : 1024*1024*10, //上传文件的大小限制,单位为字节'simUploadLimit' : 2, //允许同时上传的个数默认值:1// 'onInit' : function(){alert("1");}, //做一些初始化的工作'onSelect' : function(event, queueID, fileObj) { //选择文件时触发saveDocName();//$("#uploadify").uploadifySettings('scriptData',// {"clno" : $("#newclno").val()});// //可以动态修改上面的那些key值$("#uploadify").uploadifySettings('script', '../resources/uploadfile/uploadDoc.jsp?clno='+$("#newclno").val());},//'onSelectOnce' : function(event,data){ alert("您共选择了"+data.fileCount+"个文件!");}, //在单文件或多文件上传时,选择文件时触发// 'onOpen' : function(event,queueId,fileObj){}// //点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列// 'onComplete' :// function(event,queueId,fileObj,response,data){}// //文件上传完成后触发,每个文件上传完成后就会触发'onAllComplete' : function(event, data) { //文件队列中所有的文件上传完成后触发alert("上传的文件个数:" + data.filesUploaded + "\r\n" +"出现错误的个数:"+ data.errors + "\r\n"+"文件大小:" + data.allBytesLoaded);reDnameString();},'onCancel' : function(event,queueId,fileObj,data) { //当点击文件队列中文件的关闭按钮或点击取消上传时触发// alert("删除:"+);cancelDoc();},'buttonText' : 'BROWSE'// 浏览按钮的文本,默认值:BROWSE。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Uploadify 使用说明
使用uploadify组件的优点是,
l使用ajax 方式上传
l jsp页面和jc 中不需要写处理文件上传的相关方法,仅需要用一个隐藏框保存文件名即可
l上传的文件在服务器中唯一存在,不会过多占用硬盘空间
l无论上传任何文件,都不用担心其会危害服务器的安全
缺点是,上传后的文件不允许修改(如需修改,必须下载后修改再重新上传)
假设我们要使用uploadify 组件的项目名为:project1。
一、在要使用uploadify 的web 项目的WEB-INF/web.xml 中添加一些配置,例如:
其中紫色的文字为下面jsp 页面中将用到的路径;
二、 带图片预览的jsp页面:
1.导入一些必要的文件(以下代码不需要任何改变),包括:
2.加入一段页面初始化后要执行的javascript 代码:(代码中紫色的文字为实际项目的名称及其在上面
web.xml 中的设置;红色的单词是需要根据实际情况修改的,并将在后面解释;蓝色字体根据自己项目
的需要进行修改)
3.在jsp页面中,在要放置图片上传的地方写增加一些代码,例如:
上面代码中,第一个图片标签用于预览图片;第二个隐藏按钮用于保存上传后,服务器返回来的文件名;第三个按钮是图片按钮,用于清除预览图片,同时清除掉保存在隐藏按钮里的文件名;第四个标签是用于显示文件上传用的,这个按钮是必须提供的,前面三个是可选的。
4. 提供一个清除图片的 javascript ,如:
5. 最后,基本的效果如图所示:
a. 未上传图片时:
b. 上传图片后:
三、多文件上传的 jsp 页面
1.和第二节第1点相同
2.加入一段页面初始化后要执行的 javascript 代码:
3. 在jsp页面中,在要放置附件上传的地方写增加一些代码,例如:
4. 提供删除附件和下载附件的javascript 方法,如:
5. 最后,基本的效果如图所示:
a. 未上传附件时:
b. 上传附件后:
注意事项:有时候,在360浏览器上,进行文件上传时,会出现无法上传的现象。
后台中显示,用户没有登录。
这是360浏览器内部cookie的问题。
可以关掉360浏览器后,重新打开360浏览器,再进行上传,可能就可以成功了。
如果还不行的话,可以换用ie等浏览器即可。
四、可能出现的问题
有时选择文件进行上传时,上传失败,后台报的错误是:“用户没有登录,无法上传文件”。
这通常是由于360 浏览器引起的。
可以把360 浏览器关掉,然后登录上传(不要打开多个oa 系统);或用ie 进行上传。