[插件] 如何在一个页面中使用多个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中 ...
随机推荐
- 算法笔记_035:寻找最小的k个数(Java)
目录 1 问题描述 2 解决方案 2.1 全部排序法 2.2 部分排序法 2.3 用堆代替数组法 2.4线性选择算法 1 问题描述 有n个整数,请找出其中最小的k个数,要求时间复杂度尽可能低. 2 ...
- 请MVC5 WebApi2 支持OData协议查询
一.配置项 1.WebApiConfig.cs添加如下代码: // api 支持 cors允许Ajax发起跨域的请求(nuget 中搜索 ASP.NET Cross-Origin Support,然后 ...
- 【转发】jQuery1.9.1至最高版本针对checkbox的调整
在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态: $('#che ...
- 40、JDBC相关概念介绍
1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡,同样道理,我们安装好数据 ...
- 对固态硬盘ssd进行4k对齐
别让SSD成半吊子!你真的4K对齐了吗? http://ssd.zol.com.cn/537/5374950_all.html SSD固态硬盘一键分区后如何检测4K对齐? http://pcedu.p ...
- HDU 2647--Reward【拓扑排序】
Reward Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- 【RESTful风格】软件接口设计中RESTful风格
REST = Representational State Transfer 表述性状态转移,是一种软甲接口设计风格.总之就是一种风格 REST基于:HTTP.HTML.JSON.XML.URI 这些 ...
- TensorFlow 安装 Ubuntu14.04
1.Install pip (or pip3 for python3) if it is not already installed: # Ubuntu/Linux 64-bit $ sudo apt ...
- 如何用php启动exe程序,并在进程中查看?
function query_process($service) { /* **查看WINDOWS系统进程列表,并查找指定进程是否存在 */ $tasklist = $_SERVER["WI ...
- Introduction to SIFT (Scale-Invariant Feature Transform)
SIFT OpenCV 官方文档: https://docs.opencv.org/master/da/df5/tutorial_py_sift_intro.html https://opencv-p ...