沈阳做网站黑酷科技,树立网站风格的步骤,短网址网站建设,公司有域名 如何做网站基于jquery的文件上传控件#xff0c;支持ajax无刷新上传#xff0c;多个文件同时上传#xff0c;上传进行进度显示#xff0c;删除已上传文件。 要求使用jquery1.4或以上版本#xff0c;flash player 9.0.24以上。 有两个版本#xff0c;一个用flash,一个是html5。html5…基于jquery的文件上传控件支持ajax无刷新上传多个文件同时上传上传进行进度显示删除已上传文件。 要求使用jquery1.4或以上版本flash player 9.0.24以上。 有两个版本一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。 官网http://www.uploadify.com/ 控件截图 用法 首先引用下面的文件 link relstylesheet typetext/css hrefuploadify.css
script typetext/javascript srchttp://code.jquery.com/jquery-1.7.2.min.js/script
script typetext/javascript srcjquery.uploadify-3.1.min.js/script 创建一个file input或者其它任何带ID的元素并对其初始化Uploadify注意目录下要有uploadify.swf这个文件和uploadify.php后台文件路径按项目中的目录结构 input typefile namefile_upload idfile_upload /
script$(function(){$(#file_upload).uploadify({swf :uploadify.swf,uploader:uploadify.php// Put your options here});});
/script 这样子就完成了一个最基础的上传组建。基本原理是改变你创建的file input生成一个DOM结构创建一个DIV按钮按钮样式修改在uploadify.css文件中的.uploadify-button将swf文件定位在按钮上面这样当你点击按钮时实际上点击的是swf Options: $(#file_upload).uploadify({auto:false, //接受true or false两个值当为true时选择文件后会自动上传为false时只会把选择的文件增加进队列但不会上传这时只能使用upload的方法触发上传。不设置auto时默认为truebuttonClass: some-class, //设置上传按钮的classbuttonCursor: hand,//设置鼠标移到按钮上的开状接受两个值hand和arrow(手形和箭头)buttonImage: img/browse-btn.png, //设置图片按钮的路径当你的按钮是一张图片时。如果使用默认的样式你还可以创建一个鼠标悬停状态但要把两种状态的图片放在一起并且默认的放上面悬停状态的放在下面原文好难表达啊you can create a hover state for the button by stacking the off state above the hover state in the image。这只是一个比较便利的选项最好的方法还是把图片写在CSS里面。buttonText: div选择文件/div,//设置按钮文字。值会被当作html渲染所以也可以包含html标签checkExisting: /uploadify/check-exists.php,//接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1不存在时返回0(应该主要是作为后台的判断吧)默认为falsedebug: false,//开启或关闭debug模式fileObjName:filedata,//设置在后台脚本使用的文件名。举个例子在php中如果这个选项设置为the_files,你可以使用$_FILES[the_files]存取这个已经上传的文件。fileSizeLimit:100MB,//设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串接受一个单位B,KB,MB,GB。如果是数字则默认单位为KB。设置为0时表示不限制fileTypeExts: *.*,//设置允许上传的文件扩展名也就是文件类型。但手动键入文件名可以绕过这种级别的安全检查所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开(*.jpg;*.png;*.gif)fileTypeDesc: All Files,//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。chrome下不支持会显示为自定义文件,ie and firefox下可显示描述formData: {timestamp: ?php echo $timestamp;?,token: ?php echo md5(unique_salt . $timestamp);?},//通过get或post上传文件时此对象提供额外的数据。如果想动态设置这些值必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法http://www.uploadify.com/documentation/uploadify/formdata/height: 30,//设置按钮的高度(单位px)默认为30.(不要在值里写上单位并且要求一个整数width也一样)width: 120,//设置按钮宽度(单位px)默认120itemTemplate:false,//模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/method:post,//提交上传文件的方法接受post或get两个值默认为postmulti: false,//设置是否允许一次选择多个文件true为允许false不允许overrideEvents: [],//重写事件接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖preventCaching:true,//是否缓存swf文件。默认为true会给swf的url地址设置一个随机数这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)progressData: percentage,//设置文件上传时显示数据有‘percentage’ or ‘speed’两个参数(百分比和速度)queueID: false,//设置上传队列DOM元素的ID上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为falsequeueSizeLimit: 999,//设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量那是uploadLimit.如果增加进队列中的文件数量超出这个值将会触发onSelectError事件。默认值为999removeCompleted: true,//是否移除掉队列中已经完成上传的文件。false为不移除removeTimeout: 3,//设置上传完成后删除掉文件的延迟时间默认为3秒。如果removeCompleted为false的话就没意义了requeueErrors: false,//设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传successTimeout: 30,//设置文件上传后等待服务器响应的秒数超出这个时间将会被认为上传成功默认为30秒swf: uploadify.swf,//swf的相对路径必写项uploader: uploadify.php//服务器端脚本文件路径必写项uploadLimit: 999//上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999}) Events: $(#file_upload).uploadify({ onCancel: function(file){console.log(The file file.name was cancelled.)},//文件被移除出队列时触发,返回file参数onClearQueue: function(queueItemCount){console.log(queueItemCountfile(s) were removed frome the queue)},//当调用cancel方法且传入*这个参数的时候触发其实就是移除掉整个队列里的文件时触发上面有说cancel方法带*时取消整个上传队列onDestroy: function(){//调用destroy方法的时候触发},onDialogClose: function(queueData){console.log(queueData.filesSelected\nqueueData.filesQueued\r\nqueueData.filesReplaced\r\nqueueData.filesCancelled\r\n queueData.filesErrored)},//关闭掉浏览文件对话框时触发。返回queueDate参数有以下属性/*filesSelected 浏览文件对话框中选取的文件数量filesQueued 加入上传队列的文件数filesReplaced 被替换的文件个数filesCancelled 取消掉即将加入队列中的文件个数filesErrored 返回错误的文件个数*/onDialogOpen:function(){//打开选择文件对话框时触发},onDisable:function(){//禁用uploadify时触发(通过disable方法)},onEnalbe: function(){//启用uploadify时触发(通过disable方法)},onFallback:function(){//在初始化时检测不到浏览器有兼容性的flash版本时实触发},onInit: function(instance){console.log(The queue ID is instance.settings.queueID)},//每次初始化一个队列时触发返回uploadify对象的实例onQueueComplete:function(queueData){console.log(queueData.uploadsSuccessful\nqueueData.uploadsErrored)},//队列中的文件都上传完后触发返回queueDate参数有以下属性/*uploadsSuccessful 成功上传的文件数量uploadsErrored 出现错误的文件数量*/onSelect: function(file){console.log(file.name)},//选择每个文件增加进队列时触发返回file参数onSelectError: function(file,errorCode,errorMsg){console.log(errorCode)console.log(this.queueData.errorMsg)},//选择文件出错时触发返回file,erroCode,errorMsg三个参数/*errorCode是一个包含了错误码的js对象用来查看事件中发送的错误码以确定错误的具体类型可能会有以下的常量QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配errorMsg 完整的错误信息如果你不重写默认的事件处理器可以使用‘this.queueData.errorMsg’ 存取完整的错误信息*/onSWFReady: function(){//swf动画加载完后触发没有参数},onUploadComplete: function(file){//在每一个文件上传成功或失败之后触发返回上传的文件对象或返回一个错误如果你想知道上传是否成功最后使用onUploadSuccess或onUploadError事件},onUploadError: function(file,errorCode,erorMsg,errorString){},//一个文件完成上传但返回错误时触发有以下参数/*file 完成上传的文件对象errorCode 返回的错误代码erorMsg 返回的错误信息errorString 包含所有错误细节的可读信息*/onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){$(#pregress).html(总共需要上传bytesTotal字节已上传totalBytesTotal字节)},//每更新一个文件上传进度的时候触发,返回以下参数/*file 正上传文件对象bytesUploaded 文件已经上传的字节数bytesTotal 文件的总字节数totalBytesUploaded 在当前上传的操作中所有文件已上传的总字节数totalBytesTotal 所有文件的总上传字节数*/onUploadStart: function(file){console.log(start update)},//每个文件即将上传前触发onUploadSuccess: function(file,data,respone){alert( id: file.id - 索引: file.index - 文件名: file.name - 文件大小: file.size - 类型: file.type - 创建日期: file.creationdate - 修改日期: file.modificationdate - 文件状态: file.filestatus - 服务器端消息: data - 是否上传成功: response);}//每个文件上传成功后触发
}) MethodsUploadify使用jquery推荐的插件模式这意味着所有方法的调用都保持在一个命名空间里。 调用这些不同的方法只需要把方法当成第一个参数传进uploadify里调用就行。在这些方法后面增加参数会被传进这个方法里这两句翻译得不是很顺畅附原文 To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method. cancel取消第一个上传的文件如果后面带参数*则是取消掉整个上传队列如$(el).uploadify(cancel, *) upload上传第一个上传的文件如果后面带参数*则上传整个队列跟cancel一样 destroy移除掉上传组建按html默认的方法上传 disable有true or false 两个参数表示是否禁止上传按钮true表示禁止false表示允许上传 settings返回或者更新一个实例的方法值接受一个方法名的参数时是返回那个方法的值当后面再跟一个参数则是更新那个方法的值。如 $(el).uploadify(settings,buttonText,BROWSE); //设置buttonText的值为BROWSE
$(el).uploadify(settings,buttonText) //返回buttonText的值 stop停止正在上传中的文件或队列 下载demo 翻译到中间的时候才发原来网上早已有中文API跟其它的例子这里附带几个也是我参考着翻译的资料 http://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html http://wenku.baidu.com/view/87df2673a417866fb84a8efd.html http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html http://www.cnblogs.com/luohu/archive/2011/12/16/2290135.html 转载于:https://www.cnblogs.com/jj-notes/p/7026471.html
