jquery+SWFUpload+COS上传组件的使用
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
/*自定义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"/>
sizeUnit:"Byte",
选择的文件最终显示的计量结果单位
sizeFixed:2,
在计算结果后保留的小数位数
fileType:"*.*",
允许上传的文件类型பைடு நூலகம்
autoRemove:false,
是否自动移除完成上传的记录
autoRemoveStoped:false,
是否在停止的时候移除上传中的文件记录
<param-value>10</param-value>
</init-param>
<!--请求响应编码格式-->
<init-param>
<param-name>ENCODING</param-name>
<param-value>utf-8</param-value>
</init-param>
<!--是否使用自定义目录-->
<!--上传的文件大小上限单位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>
if(index>-1){
renderJson(response,Constant.FILE_OVERSETSIZE);
}else{
if(einstanceofIOException){
renderJson(response,Constant.IO_ERROR);
}else{
renderJson(response,Constant.UPLOAD_FAILED);
$file_name = $_FILES[$upload_name]['name'];
$file_name=iconv("UTF-8","GB2312",$file_name);
这样即可解决。
处理上传请求的服务器端脚本URL
flashURL:"core/SWFUpload.swf",
SWFUpload.swf的文件地址
flash9URL:"core/SWFUpload_f9.swf",
SWFUpload_f9.swf f的文件地址
hideUploadBt:true,
隐藏上传按钮
hideStopBt:true,
}
}
logger.error(e.getMessage(),e.getCause());
}else{
("--- upload file upload error ---");
deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());
MultipartRequest multi =null;
try{
multi =newMultipartRequest(request,parameters.getSaveDirectory(),parameters.getMaxPostSize(),parameters.getEncoding(), rename);
<init-param>
<param-name>USE_CUSTOMDIR</param-name>
<param-value>false</param-value>
</init-param>
<!--自定义的文件保存目录-->
<init-param>
<param-name>ROOT_UPLOADDIR</param-name>
隐藏停止按钮
hideDeleteSelectBt:true,
隐藏删除按钮
hideDeleteAllBt:true,
隐藏删除所有按钮
addImgURl:"images/add.gif",
新增按钮的图标地址
uploadImgURl:"images/upload.png",
上传按钮的图标地址
stopImgURl:"images/stop.png",
renderJson(response,Constant.UPLOAD_SUCCESS);
}catch(IOException e) {
if(!BlankUtil.isBlank(e.getMessage())){
intindex = e.getMessage().indexOf("Posted content length of");
postParams:{}
可以将其他字段跟随上传文件一起传到后台
skin:"gray",
皮肤样式：
"gray","black",
"blue","green",
"orange","purple",
"red"
progressStyle:"progressBar",//progressBar,percent
<param-value>rootUpload</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>swfUploader</servlet-name>
<url-pattern>/swf/upload</url-pattern>
});
});
</script>
3.参数说明：
注：有关SWFUpload的详细说明请参考：
http://leeon.me/upload/other/swfupload.html
width : 500,
插件显示区域宽度
heigth : 100,
插件显示区域高度
uploadURL:'/swf/upload',
二：
在body中添加组件显示目标
<divid="vinEdit"></div>
三：
在jqeury中初始化插件
<scripttype="text/javascript">
$(function() {
//文档就绪
varpath = "<%=path%>/uiwidget/vinSwfUpload-1.2/";
</servlet-mapping>
常见错误
■所上传的文件体积并未超出SWFUpload所设置的数值，但为何无法成功上传？
□通常这是由于服务器端的限制所造成的，以Apache+PHP为例，请修改php.ini中的post_max_size与upload_max_filesize两项设置。
■在带有Session验证的网站后台中SWFUpload无法正常工作？
varupload = $("#vinEdit").vinSWFUpload( {
uploadURL:'<%=path%>/swf/upload',
width : 500,
heigth : 300,
sizeUnit:"M",
skin:"green",
autoRemoveStoped:false,
flashURL : path+"core/SWFUpload.swf",
/*自定义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>
进度显示效果
Percent：百分比
progressBar：进度条
4、效果图预览（1）
效果图预览（2）
有了上传插件，那肯定是要有处理上传的类的，举例使用servlet+COS：
下面是主要代码：（详细代码见class文件）
DefaultFileRenamePolicy rename = generateFileRenamePolicy();
关于swfupload上传中文文件名乱码的问题实际上是由于编码的问题造成的程序使用的utf8文件名传递时也是这种编码因此造成乱码或文件不能保存仅是需要修改接收文件以php为例uploadphpfilesuploadname?name?
jquery+SWFUpload+COS上传组件的使用说明
1、文档编写目的：
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"
□这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程，因此无法与原有程序的Session保持一致，这就需要在上传时传递原有程序的SessionID，根据它来“找回”其应有的Session。
■关于swfupload上传中文文件名乱码的问题
□实际上是由于编码的问题造成的，程序使用的utf-8，文件名传递时也是这种编码，因此造成乱码或文件不能保存，仅是需要修改接收文件，以PHP为例，upload.php中
停止按钮的图标地址
deleteImgURl:"images/trash.gif",
删除按钮的图标地址
tipImgURl:"images/tip.gif",
加载提示图片的地址
fileLimit:0,
限定用户一次性最多上传多少个文件
maxSize:'-1',//1M
上传文件体积上限，单位byte,默认10M
}
return;
}
写好了处理类就是配置了：
web.xml中添加下面配置：
<!--swfUploader-->
<servlet>
<servlet-name>swfUploader</servlet-name>
<servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>
此文档目的是介绍jquery+swfUpload编写的jquery上传插件vinSefvinSwfUpload的简单使用！
2.具体使用步骤：
一：
引入必须的js文件和css文件：
/*jquery1.4核心库*/
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
<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"/>
sizeUnit:"Byte",
选择的文件最终显示的计量结果单位
sizeFixed:2,
在计算结果后保留的小数位数
fileType:"*.*",
允许上传的文件类型பைடு நூலகம்
autoRemove:false,
是否自动移除完成上传的记录
autoRemoveStoped:false,
是否在停止的时候移除上传中的文件记录
<param-value>10</param-value>
</init-param>
<!--请求响应编码格式-->
<init-param>
<param-name>ENCODING</param-name>
<param-value>utf-8</param-value>
</init-param>
<!--是否使用自定义目录-->
<!--上传的文件大小上限单位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>
if(index>-1){
renderJson(response,Constant.FILE_OVERSETSIZE);
}else{
if(einstanceofIOException){
renderJson(response,Constant.IO_ERROR);
}else{
renderJson(response,Constant.UPLOAD_FAILED);
$file_name = $_FILES[$upload_name]['name'];
$file_name=iconv("UTF-8","GB2312",$file_name);
这样即可解决。
处理上传请求的服务器端脚本URL
flashURL:"core/SWFUpload.swf",
SWFUpload.swf的文件地址
flash9URL:"core/SWFUpload_f9.swf",
SWFUpload_f9.swf f的文件地址
hideUploadBt:true,
隐藏上传按钮
hideStopBt:true,
}
}
logger.error(e.getMessage(),e.getCause());
}else{
("--- upload file upload error ---");
deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());
MultipartRequest multi =null;
try{
multi =newMultipartRequest(request,parameters.getSaveDirectory(),parameters.getMaxPostSize(),parameters.getEncoding(), rename);
<init-param>
<param-name>USE_CUSTOMDIR</param-name>
<param-value>false</param-value>
</init-param>
<!--自定义的文件保存目录-->
<init-param>
<param-name>ROOT_UPLOADDIR</param-name>
隐藏停止按钮
hideDeleteSelectBt:true,
隐藏删除按钮
hideDeleteAllBt:true,
隐藏删除所有按钮
addImgURl:"images/add.gif",
新增按钮的图标地址
uploadImgURl:"images/upload.png",
上传按钮的图标地址
stopImgURl:"images/stop.png",
renderJson(response,Constant.UPLOAD_SUCCESS);
}catch(IOException e) {
if(!BlankUtil.isBlank(e.getMessage())){
intindex = e.getMessage().indexOf("Posted content length of");
postParams:{}
可以将其他字段跟随上传文件一起传到后台
skin:"gray",
皮肤样式：
"gray","black",
"blue","green",
"orange","purple",
"red"
progressStyle:"progressBar",//progressBar,percent
<param-value>rootUpload</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>swfUploader</servlet-name>
<url-pattern>/swf/upload</url-pattern>
});
});
</script>
3.参数说明：
注：有关SWFUpload的详细说明请参考：
http://leeon.me/upload/other/swfupload.html
width : 500,
插件显示区域宽度
heigth : 100,
插件显示区域高度
uploadURL:'/swf/upload',
二：
在body中添加组件显示目标
<divid="vinEdit"></div>
三：
在jqeury中初始化插件
<scripttype="text/javascript">
$(function() {
//文档就绪
varpath = "<%=path%>/uiwidget/vinSwfUpload-1.2/";
</servlet-mapping>
常见错误
■所上传的文件体积并未超出SWFUpload所设置的数值，但为何无法成功上传？
□通常这是由于服务器端的限制所造成的，以Apache+PHP为例，请修改php.ini中的post_max_size与upload_max_filesize两项设置。
■在带有Session验证的网站后台中SWFUpload无法正常工作？
varupload = $("#vinEdit").vinSWFUpload( {
uploadURL:'<%=path%>/swf/upload',
width : 500,
heigth : 300,
sizeUnit:"M",
skin:"green",
autoRemoveStoped:false,
flashURL : path+"core/SWFUpload.swf",
/*自定义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>
进度显示效果
Percent：百分比
progressBar：进度条
4、效果图预览（1）
效果图预览（2）
有了上传插件，那肯定是要有处理上传的类的，举例使用servlet+COS：
下面是主要代码：（详细代码见class文件）
DefaultFileRenamePolicy rename = generateFileRenamePolicy();
关于swfupload上传中文文件名乱码的问题实际上是由于编码的问题造成的程序使用的utf8文件名传递时也是这种编码因此造成乱码或文件不能保存仅是需要修改接收文件以php为例uploadphpfilesuploadname?name?
jquery+SWFUpload+COS上传组件的使用说明
1、文档编写目的：
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"
□这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程，因此无法与原有程序的Session保持一致，这就需要在上传时传递原有程序的SessionID，根据它来“找回”其应有的Session。
■关于swfupload上传中文文件名乱码的问题
□实际上是由于编码的问题造成的，程序使用的utf-8，文件名传递时也是这种编码，因此造成乱码或文件不能保存，仅是需要修改接收文件，以PHP为例，upload.php中
停止按钮的图标地址
deleteImgURl:"images/trash.gif",
删除按钮的图标地址
tipImgURl:"images/tip.gif",
加载提示图片的地址
fileLimit:0,
限定用户一次性最多上传多少个文件
maxSize:'-1',//1M
上传文件体积上限，单位byte,默认10M
}
return;
}
写好了处理类就是配置了：
web.xml中添加下面配置：
<!--swfUploader-->
<servlet>
<servlet-name>swfUploader</servlet-name>
<servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>
此文档目的是介绍jquery+swfUpload编写的jquery上传插件vinSefvinSwfUpload的简单使用！
2.具体使用步骤：
一：
引入必须的js文件和css文件：
/*jquery1.4核心库*/
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>