图片上传插件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 学习笔记(十一)
Jan 19 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
Vue watch响应数据实现方法解析
Jul 10 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.NET的入门教程
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
js 操作符实例代码
2009/10/24 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python2和Python3中print的用法示例总结
2017/10/25 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
护士检查书
2014/01/17 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
环保建议书200字
2014/05/14 职场文书
药剂专业求职信
2014/06/20 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
法律服务所工作总结
2015/08/10 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers