图片上传插件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 获取当前时间戳的代码
Aug 05 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
关于JS中prototype的理解
Sep 07 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
详解babel升级到7.X采坑总结
2019/05/12 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python实现高效求解素数代码实例
2015/06/30 Python
详解Python中heapq模块的用法
2016/06/28 Python
python绘制热力图heatmap
2020/03/23 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python自动化操作实现图例绘制
2020/07/09 Python
Python是怎样处理json模块的
2020/07/16 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
安全演讲稿大全
2014/05/09 职场文书
实习单位证明范例
2014/11/17 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL