图片上传插件jquery.uploadify详解

所属分类: 网络编程 / JavaScript 阅读数: 617
收藏 0 赞 0 分享

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/

更多精彩内容其他人还在看

简单的实现点击箭头图片切换的js代码

这个是一个简单的点击箭头图片切换的例子。JS部分采用过的是jQuery
收藏 0 赞 0 分享

很弱的js表格换行效果(表格移动行)

很弱的js表格换行效果(表格移动行),可以将表格的一行向上或向下移动,主要是学习dom之表格控制操作
收藏 0 赞 0 分享

始终在页面底部的层js实现代码

其实就是通过js将层始终定位在底部,多用于提示效果
收藏 0 赞 0 分享

JavaScript 模式之工厂模式(Factory)应用介绍

工厂模式也是对象创建模式之一,它通常在类或类的静态方法中去实现,本文将详细介绍JavaScript 工厂模式
收藏 0 赞 0 分享

中国地区三级联动下拉菜单效果分析

主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,本文将详细介绍
收藏 0 赞 0 分享

javascript 图片裁剪技巧解读

本文将提供php版的JavaScript裁剪图片代码,仅供大家参考
收藏 0 赞 0 分享

jquery getScript动态加载JS方法改进详解

有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法
收藏 0 赞 0 分享

基于JQuery模仿苹果桌面的Dock效果(初级版)

新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定
收藏 0 赞 0 分享

基于JQuery的模拟苹果桌面Dock效果(稳定版)

之所以将它命名为稳定版,是因为之前已经分享了一个初级版本的,之前的初级版中存在很多bug。现在经过反复琢磨、实验,修复了之前版本存在的很多不足之处,就算鼠标快速的滑动依然表现的很稳定
收藏 0 赞 0 分享

JavaScript 用cloneNode方法克隆节点的代码

很多时候我们需要通过HTML DOM 的方式,用JavaScript 动态生成很多相同的节点,包括其子节点
收藏 0 赞 0 分享
查看更多