jQuery上传插件Uploadify使用介绍
以图纸资料上传为例,介绍Uploadify插件的使用,插件下载地址 http://www.uploadify.com/download/
上传页面:
选择文件增加未上传界面:
上传成功预览界面:
draw_add.jsp(为方便理解,这里方法和界面定义在同一jsp文件中)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String p1 = request.getContextPath();
String path1 = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+p1+"/";
%>
<link href="<%=path1%>plus/uploadify/default.css" rel="stylesheet" type="text/css" />
<link href="<%=path1%>plus/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path1 %>plus/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<%=path1 %>plus/uploadify/jquery.uploadify.v X.X.X.js"></script> <script type="text/javascript">
var num =0;
var filename ="";
var bz = $('#dreawingBz').val(); //选择本地文件
$("#uploadify").uploadify({
'uploader' : 'plus/uploadify/uploadify.swf?random=' + (new Date()).getTime(),
'script' : '<%=path1 %>UserAction!addDrawingSave.action;jsessionid=<%=session.getId()%>',
'scriptData' : {'tzzl.yhbh':$('#drawYhbh').val(),'tzzl.lx':$('#lx').val(),'tzzl.objId':$('#objId').val()},
'cancelImg' : '<%=path1 %>plus/uploadify/cancel.png',
'folder' : 'uploads;jsessionid=$("#sessionId").val()',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'simUploadLimit' : 2,
//'buttonImg' : '<%=path1 %>plus/uploadify/cloose.png',
'onComplete' : function(event, queueID, fileObj,response,data) {
if(response)
{
var res = response.split("^");
if(num>0)
{
filename +=",";
}
num += parseInt(res[0]);
filename += res[1];
}
},
'onAllComplete' : function(event, queueID, fileObj,response,data) {
setTimeout(function(){
if(num>0) {
var postData ={"tzzl.yhbh":$('#drawYhbh').val(),"tzzl.mcs":filename,"tzzl.bz":$('#dreawingBz').val()};
$.ajax({
url:'<%=path1%>UserAction!updateDrawingBzSave.action',
type:'post',
data:postData,
dataType:'json',
async:false,
timeout: 30000,
success:function(data)
{
alert(data.bdxc_return_msg);
closeReloadDrawFun();
$("#addDrawingInfoWin").window("close");
}
});
num = 0;
filename="";
}
},1000);
}
}); //本地上传方法
function uploadDraw()
{
jQuery('#uploadify').uploadifyUpload();
}
//取消本地上传
function colseDrawFrom()
{
$("#addDrawingInfoWin").window("close");
}
</script>
<input type="hidden" id="drawYhbh" value="${tzzl.yhbh}"/>
<input type="hidden" id="objId" value="${tzzl.objId}"/>
<input type="hidden" id="lx" value="${tzzl.lx}"/>
<input type="hidden" id="sessionId" value="${pageContext.session.id}"/>
<div id="indexLayOut" style="overflow-y: hidden" >
<div style="width:420px;" id="west">
<div id="fileQueue" style="height:208px;"></div>
<!-- 选择框 选择本地文件 -->
<input type="file" name="uploadify" id="uploadify"/> <div align="left" style="vertical-align:top;">
<a href="javascript:uploadDraw();" class="easyui-linkbutton">开始上传</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()" class="easyui-linkbutton">取消所有上传</a>
<a href="javascript:colseDrawFrom()" class="easyui-linkbutton">取消</a>
</div>
</div>
<div>
备注:
<textarea name="dreawingBz" id="dreawingBz" style="width:360px;" rows="5"></textarea>
</div>
</div>
附:Uploadify的属性、事件、方法函数这里不进行详细介绍,可参考以下及其他
https://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html
http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html
8月输出惊人啊。。。离被淘汰不远了
jQuery上传插件Uploadify使用介绍的更多相关文章
- 【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- jquery上传插件uploadify 报错http error 302 解决方法之一
前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...
- JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
- (转)JQuery上传插件Uploadify使用详解
原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...
- jQuery上传插件Uploadify使用帮助
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...
- 文件上传利器JQuery上传插件Uploadify
在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...
- JQuery上传插件Uploadify使用详解 asp.net版
先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadif ...
- JQuery上传插件Uploadify详解及其中文按钮解决方案 .
Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行. ...
随机推荐
- 【树形dp】Rebuilding Roads
[POJ1947]Rebuilding Roads Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11934 Accep ...
- 【二项式定理】【推导】计蒜客17115 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 B. Coin
题意:投一枚硬币向上的概率是q/p.问你投K枚硬币,向上的枚数为偶数枚的概率是? 要求的即为. 这个东西是个二项展开式的偶数项系数和,来,我们复习一下高中数学,设f(x)=(ax+b)^n,则其偶数项 ...
- 【推导】【构造】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem E. Space Tourists
给你n,K,问你要选出最少几个长度为2的K进制数,才能让所有的n位K进制数删除n-2个元素后,所剩余的长度为2的子序列至少有一个是你所选定的. 如果n>K,那么根据抽屉原理,对于所有n位K进制数 ...
- 【成端更新线段树模板】POJ3468-A Simple Problem with Integers
http://poj.org/problem?id=3468 _(:зゝ∠)_我又活着回来啦,前段时间太忙了写的题没时间扔上来,以后再说. [问题描述] 成段加某一个值,然后询问区间和. [思路] 讲 ...
- 未能加载文件或程序集“System.Web.Razor 2.0.0 or system.web.webpages.razor 2.0.0
出现这种问题,有两种情况: 一.bin目录下没有相应的dll,可以将相应dll拷贝至bin目录或者设置相关dll的属性“复制到本地”:true 二.如果是高于Visual Studio2013版本的开 ...
- python笔记5-python2写csv文件中文乱码问题
前言 python2最大的坑在于中文编码问题,遇到中文报错首先加u,再各种encode.decode. 当list.tuple.dict里面有中文时,打印出来的是Unicode编码,这个是无解的. 对 ...
- 每天5分钟玩转Docker
总结的这个八爪鱼图,不懂的时候随时翻翻书.....
- OSC的原理
OSC是Online Schema Change简写,即在线架构改变.其实现步骤: 1. init,即初始化阶段,会对创建的表做一些验证工作,如检查表是否有主键,是否存在触发器或者外键等.2. cre ...
- 编译 arm 版的qt
因为项目需要,我们需要在开发板上使用QT开发平台,因此需要编译一个arm版的QT. 在网上找了一些资料,费了几天时间,终于成功了. 第一步,准备源码 先下载QT 源码,在http://qt-proje ...
- springMVC配置静态资源访问的<mvc:resources>标签的使用
在springmvc中,为了引用资源的访问不会类似Controller一样被拦截,区分出关注的资源的访问,一般我们在springMVC里面的拦截都会配置为"/",拦截所有的.但是这 ...