图片上传插件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 相关文章推荐
JS画5角星方法介绍
Sep 17 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
封装属于自己的JS组件
Jan 27 Javascript
JavaScript严格模式详解
Jan 16 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
vue keep-alive请求数据的方法示例
May 16 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
javascript实现放大镜功能
Dec 09 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
很实用的一个完整email发送程序
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
React快速入门教程
2017/01/17 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
python自动化办公操作PPT的实现
2021/02/05 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
努力学习演讲稿
2014/05/10 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2019秋季运动会口号
2019/06/25 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript