1、文档编写目的:
此文档目的是介绍jquery+swfUpload编写的jquery上传插件vinSwfUpload的简单使用!
一直没时间或者说没心情解决ie6兼容问题,前几天有位Iteye的朋友说解决了,我下载他解决后的代码,对比后,发现问题所在。
一:
2.具体使用步骤:
一:
引入必须的js文件和css文件: |
/*jquery1.4核心库*/ <scripttype="text/javascript"src="jquery-1.4.2.min.js"></script> /*自定义jquery插件vinSwfUpload的皮肤css样式*/ <linkhref="css/vinSwfUpload-1.2-skin.css"rel="stylesheet"type="text/css"/> /*自定义jquery插件vinSwfUpload的主要css样式*/ <linkhref="css/vinSwfUpload-1.2.css"rel="stylesheet"type="text/css"/> /*自定义jquery插件vinSwfUpload的jquery插件js*/ <scripttype="text/javascript"src="vinSWFUpload-1.2.js"></script> /*官方SwfUpload的核心js/ <scripttype="text/javascript"src="core/SWFUpload-2.2.js"></script> |
这里不该引入这个文件
<script type="text/javascript" src="core/SWFUpload-2.2.js"></script>
修改后引入
二:
在body中添加组件显示目标 |
<divid="vinEdit"></div> |
三:
在jqeury中初始化插件 |
<scripttype="text/javascript"> $(function() { //文档就绪 var path = "<%=path%>/uiwidget/vinSwfUpload-1.2/"; var upload = $("#vinEdit").vinSWFUpload( { uploadURL:'<%=path%>/swf/upload', width : 500, heigth : 300, sizeUnit:"M", skin:"green", autoRemoveStoped:false, flashURL : path+"core/SWFUpload.swf", addImgURl:path+"images/add.gif", uploadImgURl:path+"/images/upload.png", stopImgURl:path+"images/stop.png", deleteImgURl:path+"images/trash.gif", tipImgURl:path+"images/tip.gif" });
}); </script> |
3.参数说明:
注:有关SWFUpload的详细说明请参考: | |
width : 500, | 插件显示区域宽度 |
heigth : 100, | 插件显示区域高度 |
uploadURL:'/swf/upload', | 处理上传请求的服务器端脚本URL |
flashURL:"core/SWFUpload.swf", | SWFUpload.swf的文件地址 |
flash9URL:"core/SWFUpload_f9.swf", | SWFUpload_f9.swf f的文件地址 |
hideUploadBt:true, | 隐藏上传按钮 |
hideStopBt:true, | 隐藏停止按钮 |
hideDeleteSelectBt:true, | 隐藏删除按钮 |
hideDeleteAllBt:true, | 隐藏删除所有按钮 |
addImgURl:"images/add.gif", | 新增按钮的图标地址 |
uploadImgURl:"images/upload.png", | 上传按钮的图标地址 |
stopImgURl:"images/stop.png", | 停止按钮的图标地址 |
deleteImgURl:"images/trash.gif", | 删除按钮的图标地址 |
tipImgURl:"images/tip.gif", | 加载提示图片的地址 |
fileLimit:0, | 限定用户一次性最多上传多少个文件 |
maxSize:'-1',//1M | 上传文件体积上限,单位byte,默认10M |
sizeUnit:"Byte", | 选择的文件最终显示的计量结果单位 |
sizeFixed:2, | 在计算结果后保留的小数位数 |
fileType:"*.*", | 允许上传的文件类型 |
autoRemove:false, | 是否自动移除完成上传的记录 |
autoRemoveStoped:false, | 是否在停止的时候移除上传中的文件记录 |
skin:"gray", | 皮肤样式: "gray","black", "blue","green", "orange","purple", "red" |
progressStyle:"progressBar",//progressBar,percent | 进度显示效果 Percent:百分比 progressBar:进度条 |
4、效果图预览 (1)
效果图预览 (2)
有了上传插件,那肯定是要有处理上传的类的,举例使用servlet+COS:
下面是主要代码:(详细代码见class文件) |
DefaultFileRenamePolicy rename = generateFileRenamePolicy(); MultipartRequest multi =null; try { multi =new MultipartRequest(request,parameters.getSaveDirectory(),parameters.getMaxPostSize(),parameters.getEncoding(), rename); renderJson(response,Constant.UPLOAD_SUCCESS); }catch (IOException e) { if(!BlankUtil.isBlank(e.getMessage())){ int index = e.getMessage().indexOf("Posted content length of"); if(index>-1){ renderJson(response,Constant.FILE_OVERSETSIZE); }else{ if(einstanceof IOException){ renderJson(response,Constant.IO_ERROR); }else{ renderJson(response,Constant.UPLOAD_FAILED); } } logger.error(e.getMessage(),e.getCause()); }else{ logger.info("--- upload file upload error ---"); deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName()); } return; } |
写好了处理类就是配置了:
web.xml中添加下面配置: |
<!--swfUploader --> <servlet> <servlet-name>swfUploader</servlet-name> <servlet-class>com.upload.swf.SwfUploadServlet</servlet-class> <!--上传的文件大小上限单位M--> <init-param> <param-name>FILE_SIZE_LIMIT</param-name> <param-value>10</param-value> </init-param> <!--一次性上传的文件个数上限--> <init-param> <param-name>FILE_COUNT_LIMIT</param-name> <param-value>10</param-value> </init-param> <!--请求响应编码格式--> <init-param> <param-name>ENCODING</param-name> <param-value>utf-8</param-value> </init-param> <!--是否使用自定义目录--> <init-param> <param-name>USE_CUSTOMDIR</param-name> <param-value>false</param-value> </init-param> <!--自定义的文件保存目录--> <init-param> <param-name>ROOT_UPLOADDIR</param-name> <param-value>rootUpload</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>swfUploader</servlet-name> <url-pattern>/swf/upload</url-pattern> </servlet-mapping> |