图片上传插件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 读取和设置文档元素的样式属性
Apr 14 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
使用Vue生成动态表单
Nov 26 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
星际玩家的三大定律
2020/03/04 星际争霸
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
Java程序员常见面试题
2015/07/16 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
总经理助理工作职责
2014/02/06 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
消防宣传标语大全
2015/08/03 职场文书
护士岗位竞聘书
2015/09/15 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js