图片上传插件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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python自动安装pip
2014/04/24 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python关于变量名的基础知识点
2020/03/03 Python
python实现飞船大战
2020/04/24 Python
python 两种方法删除空文件夹
2020/09/29 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
农村党员一句话承诺
2014/05/30 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
python中filter,map,reduce的作用
2022/06/10 Python