Uploadify Version 3.2的使用
程序员文章站
2024-01-12 12:16:28
...
注:截至目前最新的版本是Uploadify 3.2,注意在使用时看清楚版本,因为旧版本和新版本所提供的参数设置有很大差别。 1、引入Uploadify所需的JS及CSS文件 link id=easyuiTheme rel=stylesheet href=/js/uploadify/uploadify.css type=text/css/linkscript ty
注:截至目前最新的版本是Uploadify 3.2,注意在使用时看清楚版本,因为旧版本和新版本所提供的参数设置有很大差别。
1、引入Uploadify所需的JS及CSS文件
如上所示同时也要引入swfobject.js这个插件,最好使用最新的版本,当然,JQUERY的基础库那也是必须要引入的(jquery-1.8.0.min.js)2、使用方法
$(function() { $("#documentfile").uploadify({ //请求路径,这里我请求的是struts2的action,但是在请求路径后加了.action,就无法提交。 'uploader': '${pageContext.request.contextPath}/uploads/control_projectDocument_addDocumentVersion', 'swf':'${pageContext.request.contextPath}/js/uploadify/uploadify.swf',//引入uploadify提供的swf文件 'cancelImg': 'js/uploadify/uploadify-cancel.png',//取消按钮 'queueID': 'fileQueue',//文件选择后所要存放的容器 'wmode' : 'transparent', 'debug' : false,//是否开启调试 'auto': false,//是否开启自动上传 'multi': true, 'fileObjName':'documentfile',//上传文件input type=file的名称 'width':84,//宽度 'height':24,//高度 'buttonText':'',//改变上传按钮的文本 'preventCaching':true, 'removeTimeout':1, //不执行默认的onSelect事件 'overrideEvents' : ['onDialogClose'], 'fileTypeDesc':'支持的格式:', //在浏览窗口底部的文件类型下拉菜单中显示的文本 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png;*.bmp;*.swf;*.doc;*.txt;*.xls;*.ppt;*.pdf;*.xlsx;*.docx;*.pptx;*.mpp',//允许上传的文件后缀 'fileSizeLimit':'50MB',//上传文件的大小限制 'queueSizeLimit' : 5,//上传数量 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//每次更新上传的文件的进展 //利用这个方法可以自定义上传进度, //使用方法见官方说明 }, //选择上传文件后调用 'onSelect' : function(file) { }, //返回一个错误,选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -100: $.messager.alert('提示',"上传的文件数量已经超出系统限制的"+$('#documentfile').uploadify('settings','queueSizeLimit')+"个文件!"); break; case -110: $.messager.alert('提示',"文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小!"); break; case -120: $.messager.alert('提示',"文件 ["+file.name+"] 大小异常!"); break; case -130: $.messager.alert('提示',"文件 ["+file.name+"] 类型不正确!"); break; } }, //检测FLASH失败调用 'onFallback':function(){ $.messager.alert('提示',"您未安装FLASH控件,无法上传图片!请安装FLASH控件后重启浏览器再试"); }, //上传到服务器,服务器返回相应信息到data里 'onUploadSuccess':function(file, data, response){ $('#' + file.id).find('.data').html(' - 完成'); $('#documentfile').uploadify('upload'); var r = $ .parseJSON(data); $.messager.show({ msg : r.msg, title : '提示' }); } }); });
3.所支持的表单
4.在使用时,通常除了上传的文件外,还需传入其它参数可以使用settings属性进行设置
//在上传文件时,判断是否选择了文件 if($('#fileQueue').html()==""){ alert('提示',"请先选择文件!"); } //设置其它要传入后台的参数,格式如下 $('#documentfile').uploadify('settings', 'formData', { 'projectDocument.pid':$('#admin_xmwd_treegrid').propertygrid('getSelected').id, 'version':$('#version').val() }); $('#documentfile').uploadify('upload');//执行上传操作到此位置,uploadify的基本使用就算完成。
uploadify3.2压缩包下载地址:下载Uploadify使用所需文件
推荐阅读
-
Uploadify Version 3.2的使用
-
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
-
THINKPHP3.2使用soap连接webservice的解决方法_php实例
-
使用uploadify上传大于3兆的文件时显示成功,但是没有上传到文件夹中
-
vue3.0 CLI - 3.2 路由的初级使用教程
-
ASP.NET多文件上传控件Uploadify的使用方法
-
ASP.NET文件上传控件Uploadify的使用方法
-
ASP.NET文件上传控件Uploadify的使用方法
-
ASP.NET多文件上传控件Uploadify的使用方法
-
解决uploadify使用时session发生丢失问题的方法