[插件] 如何在一个页面中使用多个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中 ...
随机推荐
- TCP/IP编程 - 1) 基础知识
1. What Is a Socket?(什么是套接字) A socket is an abstraction through which an application may send and re ...
- UNIX网络编程读书笔记:端口号、套接口对和套接口
端口号 端口号(port number):16位整数,用来区分不同的进程. 服务器使用的端口号:TCP和UDP定义了一组众所周知的端口(well-known port),用于标识众所周知的服务. 客户 ...
- 算法笔记_130:行列递增矩阵的查找(Java)
目录 1 问题描述 2 解决方案 2.1定位法 1 问题描述 在一个m行n列的二维数组中,每一行都按照从左到右递增的顺序排列,每一列都按照从上到下递增的顺序排列.现在输入这样的一个二维数组和一个整 ...
- windows程序崩溃生成dump文件
第一种: 通过任务管理器:这种适用在程序挂了(crash)的时候进程还未退出,比如我运行程序,出现了下面的错: 此时打开任务管理器,右击相应进程,点击"Create Dump File“: ...
- webpack 编译模板文件
1.项目结构 安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.tpl <div cl ...
- SpringMVC中使用-sqljdbc4.jar
昨天将现在写的Web项目中的数据库由MySQL换成SQLServer,昨天想把MySQL重新安装一下,但是由于不明原因,导致无法安装. 卸载MySQL.删除安装文件.删除注册表.重启电脑.但是安装的时 ...
- springmvc处理流程
SpringMVC核心处理流程: 1.DispatcherServlet前端控制器接收发过来的请求,交给HandlerMapping处理器映射器 2.HandlerMapping处理器映射器,根据请求 ...
- 在 VirtualBox 虚拟机中安装 Arch Linux 系统指南
How to install Arch Linux on VirtualBox 在 VirtualBox 虚拟机中安装 Arch Linux 系统指南 本文导航 1.Arch Linux 软件仓库2. ...
- ASP.NET总结
ASP.NET已经学习完.学牛腩的时候面对一些控件和方法会用,但对当中的原理还不懂.学习这部分的内容时, 从头到尾都有一种相识的感觉,把之前一些不懂得地方也理解了,每个知识都有相应的样例练习,学起来还 ...
- DP SRM 661 Div2 Hard: ColorfulLineGraphsDiv2
Problem Statement Bob is going to create a graph with N nodes. The graph will be constructed in two ...