[插件] 如何在一个页面中使用多个SWFUpload对象上传文件
首先需要引入相应的样式和JS文件，还需要借助jQuery的js
提供下载路径：http://pan.baidu.com/s/1EUzca
① 引入js
<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/fileprogress.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/swfupload/js/handlers.js"></script>
② 初始化SWFUpload对象（红色的需要注意）
$(document).ready(function() {
//初始化第一个SWFUpload对象
var upload1 = new SWFUpload({ //提交路径
upload_url: "${pageContext.request.contextPath }/upload3.action",
//向后台传递额外的参数
post_params: {"name" : "identifier_img_"},
//上传文件的名称
file_post_name: "file", // 下面自己按照字面意思理解
file_size_limit : "51200", // 100MB
file_types : "*.jpg;*.gif;*.png",
file_types_description : "*.jpg;*.gif;*.png",
file_upload_limit : "",//最多上传几次
file_queue_limit : "",//每次最多上传几个 // 事件处理
file_dialog_start_handler : fileDialogStart,//在文件选取窗口将要弹出时触发
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,//处理上传的验证逻辑
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,//上传完成后的回调函数
upload_complete_handler : uploadComplete, // 按钮的处理
button_image_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/uploadbutt.jpg",
button_placeholder_id : "spanButtonPlaceholder1",
button_width: 100,
button_height: 28,
//button_text:'<span class="theFont">选择添加</span>', // Flash Settings
flash_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.swf", custom_settings : {
progressTarget : "fsUploadProgress1",
cancelButtonId : "btnCancel1"
}, // Debug Settings
debug: false
});
//初始化第二个SWFUpload对象
var upload2 = new SWFUpload({ //提交路径
upload_url: "${pageContext.request.contextPath }/upload3.action",
//向后台传递额外的参数
post_params: {"name" : "identifier_img_"},//为图片重命名的前缀
//上传文件的名称
file_post_name: "file",//传给后台的name="file" // 下面自己按照字面意思理解
file_size_limit : "51200", // 100MB
file_types : "*.jpg;*.gif;*.png",
file_types_description : "*.jpg;*.gif;*.png",
file_upload_limit : "10",//最多上传10次
file_queue_limit : "1",//每次最多上传一个 // 事件处理
file_dialog_start_handler : fileDialogStart,//在文件选取窗口将要弹出时触发
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete, // 按钮的处理
button_image_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/uploadbutt.jpg",
button_placeholder_id : "spanButtonPlaceholder2",
button_width: 100,
button_height: 28,
//button_text:'<span class="theFont">选择添加</span>', // Flash Settings
flash_url : "${pageContext.request.contextPath }/js/swfupload/swfupload/swfupload.swf", custom_settings : {
progressTarget : "fsUploadProgress2",
cancelButtonId : "btnCancel2"
}, // Debug Settings
debug: false
});
});
③ 定义需要的处理函数
function uploadSuccess(file, server) {
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setComplete();
progress.setStatus("上传成功"+server);
progress.toggleCancel(false);
//后台传递回来的内容
var symbol="identifier_img_";
var object = document.getElementsByName('name');
var url=symbol+object[object.length-1].value;（后台返回的文件名称。如：identifier_img_123232453655634.jpg）
var type = $("#upload_type").val();
if(type == '1'){
$("#sfzPath").val("/upload/up3/"+url);
$("#sfzImg").attr("src","${pageContext.request.contextPath }/upload/up3/"+url);
$(".img1").show();
$(".img2").hide();
}else if(type == '2'){
$("#yyzzPath").val("/upload/up3/"+url);
$("#yyzzImg").attr("src","${pageContext.request.contextPath }/upload/up3/"+url);
$(".img2").show();
$(".img1").hide();
}
}
function fileQueueError(file, errorCode, errorMsg) {
var msgText = "上传失败\n";
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
msgText += "每次最多选择上传 " + this.settings.file_queue_limit + "个文件,
并且最多只能选择"+this.settings.file_upload_limit+"次";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
msgText += "文件大小超过限制( " + this.settings.file_size_limit + "KB )";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
msgText += "文件大小为0";
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;
break;
default:
msgText += "错误代码：" + errorCode + "\n" + errorMsg;
}
alert(msgText);
}
④ 定义HTML（红色部分与JS关联）
<!--第一个按钮-->
<li>
<input id="btnCancel1" type="hidden" value="" onclick="cancelQueue(upload1);" disabled="disabled" />
<span class="tit_zhxg" style="width:200px;">证件上传SWF1：</span>
<span id="spanButtonPlaceholder1"></span>
</li>
<li>
<div style="display: none" class="fieldset flash" id="fsUploadProgress1">
<span class="legend">文件上传</span>
</div>
</li>
<li class="img1" style="display:none;">
<span class="tit_zhxg">图片上传预览：</span>
</li>
<li class="img1" style="display:none;margin-top: -10px; height: 85px;margin-bottom:98px;">
<span class="tit_zhxg"> </span>
<img src="" style="width: 340px; height:180px;" id="sfzImg">
<input type="hidden" name="IMGPATH" value="" id="sfzPath">
</li> <!--第二个按钮-->
<li>
<input id="btnCancel2" type="hidden" value="" onclick="cancelQueue(upload2);" disabled="disabled" />
<span class="tit_zhxg" style="width:200px;">证件上传SWF2：</span>
<span id="spanButtonPlaceholder2"></span>
</li>
<li>
<div style="display: none" class="fieldset flash" id="fsUploadProgress2">
<span class="legend">文件上传</span>
</div>
</li>
<li class="img1" style="display:none;">
<span class="tit_zhxg">图片上传预览：</span>
</li>
<li class="img1" style="display:none;margin-top: -10px; height: 85px;margin-bottom:98px;">
<span class="tit_zhxg"> </span>
<img src="" style="width: 340px; height:180px;" id="yyzzImg">
<input type="hidden" name="IMGPATH" value="" id="yyzzPath">
</li>
⑤ 编写后台处理程序
private File file;//传来的文件FILE
private String fileFileName;//文件名
private String fileContentType;//文件类型
private String savePath;//保存路径
private String name;//额外的参数
HttpServletRequest request = ServletActionContext.getRequest();
//getters and setters
public String up3() throws Exception {
InputStream is = new FileInputStream(file);
String root = getSavePath();
String tempName = System.currentTimeMillis()+this.getFileFileName().substring(this.getFileFileName().indexOf("."));
String saveName=this.getName()+this.getFileFileName().substring(this.getFileFileName().indexOf("."));
File deskFile = new File(root,this.getName()+tempName);//+"_"+this.getFileFileName());
this.setName(tempName);
OutputStream os = new FileOutputStream(deskFile);
byte[] bytefer = new byte[1024];
int length = 0;
while ((length = is.read(bytefer)) != -1) {
os.write(bytefer, 0, length);
}
os.close();
is.close();
return "success";
}
⑥ 编写配置文件
<action name="upload3" class="com.action.FileUploadAction" method="up3">
<param name="savePath">/upload/up3</param>
<result name="success">js/swfupload/fh.jsp</result>
</action> fh.jsp <input name="name" value="${name}">
[插件] 如何在一个页面中使用多个SWFUpload对象上传文件的更多相关文章
- Vue.js项目中使用 Ajax 和 FormDate 对象上传文件
let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...
- 在 github 中新建仓库后，如何上传文件到这个仓库里面。
在 github 中新建仓库后,如何上传文件到这个仓库里面. libin@hglibin MINGW64 /e/github.io (master) $ git remote libin@hglibi ...
- 使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项
首先感谢,http://www.cnblogs.com/2050/p/3913184.html 这篇文章作者. 在使用PLUpload之前个人先封装了一些常用配置,并且将success与error做为 ...
- 页面中使用多个element-ui upload上传组件时绑定对应元素
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...
- CentOS7中利用Xshell6向虚拟机本地上传文件
环境交代 Linux系统:CentOS7, Xshell版本:6 操作步骤 下面我们以一个文件上传来演示用法 第一步 建立连接,这里不多说 在Xshell中点击如下图标,或者直接按 Alt+Ctrl+ ...
- 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-ph ...
- ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件
ajaxForm插件最好选择:jquery forms plugin. 以下为示例: Ajax.BeginForm @using (Ajax.BeginForm("YourAction&qu ...
- Vue axios 中提交表单数据(含上传文件)
伟大的画家都是先从模仿开始 的,我写的不好,很多还是抄袭,就是想提高自己的水平,没准坚持下来,我就变成一个厉害的角色了呢?
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
随机推荐
- Discuz常见小问题-如何设置QQ邮箱注册验证
开启POP3/SMTP服务器,需要发送短信,然后点击我已发送,得到一个指定的密码 开启之后得到的授权码 开启IMAP/SMTP还需要发送一次短信,得到一个另外的授权码 然后在后台设置为下面 ...
- WebService 之 属性详解
WebService 主要包含 WebService .SoapDocumentService.WebServiceBinding三个属性.若要允许使用 ASP.NET AJAX 从脚本中调用此 We ...
- java实现双向循环链表
java实现循环链表:http://www.cnblogs.com/lixiaolun/p/4643911.html 在单链表中,查询下一个元素的时间是O(1).查询上一个元素的时间却是O(n). 为 ...
- 如何使用飞秋FeiQ实现两电脑通信（或传输文件）
如何使用飞秋FeiQ实现两电脑通信(或传输文件) 1. 在两天电脑上,分别按照飞秋FeiQ 我使用的绿色飞秋2013正式版 2. 使用一根网线,将两电脑的网口连接一起 3. 设置飞秋FeiQ的端口号不 ...
- UVALive 4857 Halloween Costumes
区间dp.对于最左边的点: 1.在该点穿的衣服只有该点用的到,即穿上就脱下.所以dp[ l ][ r ] = min(dp[ l + 1][ r ] + 1, dp[ l ][ r ]). 2.衣服仍 ...
- tomcat启动报错，找不到相应的 queue，从而引发内存泄漏
tomcat启动报错,无法创建 bean listenerStatusChangeDealHandler, no queue 'STOCK.NOTIFY_CHANGE.INTER.CACHE.QUEU ...
- python发送邮件实例1
文件形式的邮件 #!/usr/bin/env python3 #coding: utf-8 import smtplib from email.mime.text import MIMEText fr ...
- 【mysql】主键、普通索引、唯一索引和全文索引的比较
YSQL索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录 开始扫描整个表的所有记录,直至找到符合要求的记录.表里面的记 ...
- Ubuntu和windows文件共享问题
ubuntu访问windows共享文件夹(ubuntu桌面系统): 最简单的方法,随便打开一个文件夹,按Ctrl+L,然后地址栏敲smb://xxx.xxx.xxx.xxx(wind ...
- 如何使用SignalTap II觀察reg與wire值? (SOC) (Verilog) (Quartus II) (SignalTap II)
Abstract撰寫Verilog時,雖然每個module都會先用ModelSim或Quartus II自帶的simulator仿真過,但真的將每個module合併時,一些不可預期的『run-time ...