图片上传插件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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 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中cookie和session的区别实例分析
2014/08/28 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
简单实现python画圆功能
2018/01/25 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
如何利用python生成MD5并去重
2020/12/07 Python
python绘制雷达图实例讲解
2021/01/03 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
部队党性分析材料
2014/02/16 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
摄影展策划方案
2014/06/02 职场文书
单位租房协议书样本
2014/10/30 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python