图片上传插件jquery.uploadify详解


Posted in Javascript onNovember 15, 2013

1、js代码:

<script type="text/javascript"> 
$(document).ready(function() { 
$('#fileInput').uploadify({ 
//以下参数均是可选 
'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认‘uploader.swf' 
'script' : '<%=basePath%>UploadServlet', //指定服务器端上传处理文件,默认‘upload.php' 
'cancelImg' : '<%=basePath%>images/cancel.png', //指定取消上传的图片,默认‘cancel.png' 
'buttonImg':'<%=basePath%>images/upload2.jpg', 
'auto' : true, //选定文件后是否自动上传,默认false 
'folder' : '/userphoto' , //要上传到的服务器路径,默认‘/' 
'multi' : false, //是否允许同时上传多文件,默认false 
'fileDesc' : '图片文件' , //出现在上传对话框中的文件类型描述 
'fileExt' : '*.jpg;*.bmp;*.png;*.gif', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc 
'sizeLimit': 86400, //控制上传文件的大小,单位byte 
'onComplete': function(event,queueID,fileObj,response,data) { 
$('#image').attr("src","<%=basePath%>userphoto/"+response); 
$('#image').show(); 
$('#photo').attr("value",response); 
}, 
'onError' : function(event, queueID, fileObj) 
{ 
alert("文件:" + fileObj.name + " 上传失败"); 
} 
}); 
}); 
</script> 
 

2、注意事项

(1)、如果页面没有显示“BROWSE”按钮,则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对,检查下路径是否正确。

(2)、如果需要修改按钮的图片:可以使用'buttonImg'配置进行替换

(3)、上传完成后,'onComplete'事件没有触发:在后台servlet处理完后,要向页面输出1,否则页面的onComplete回 调函数不会执行。response.getWriter().write(1);

(4)、如果在后台servlet处理上传将图片的名称改变的话,就不能通过fileObj获得它的值,而是要在后台servlet输出新文件 名:out.print(filename);在jsp页面要相应使用response来获得新值。

(5)、图片预览实现:

在jsp页面中添加一个<img src=""></img>,当上传完成后在onComplete事件中修改img的src值。

3、下载地址
http://www.uploadify.com/download/

Javascript 相关文章推荐
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 #Javascript
Json和Jsonp理论实例代码详解
Nov 15 #Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
简洁Ajax函数处理(示例代码)
Nov 15 #Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 #Javascript
JavaScript?Apple设备检测示例代码
Nov 15 #Javascript
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js读取配置文件自写
2014/02/11 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
文明村创建实施方案
2014/03/27 职场文书
竞聘自述材料
2014/08/25 职场文书
办公室岗位职责范本
2015/04/11 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
导游词之青城山景区
2019/09/27 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers