图片上传插件jquery.uploadify详解

 更新时间:2013年11月15日 09:36:41   作者:  
如果页面没有显示“BROWSE”按钮,则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对,检查下路径是否正确

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跳出循环的方法区别对比分析(break,continue,return)

    JS跳出循环的方法区别对比分析(break,continue,return)

    面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字,那么关于这三个关键字的使用具体的操作是什么呢?接下来通过本文给大家讲解JS跳出循环的方法区别对比分析(break,continue,return),感兴趣的朋友一起看看吧
    2023-02-02
  • DOM中事件处理概览与原理的全面解析

    DOM中事件处理概览与原理的全面解析

    这篇文章主要为大家详细解析了DOM中事件处理概览与原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 详解javascript 正则表达式之分组与前瞻匹配

    详解javascript 正则表达式之分组与前瞻匹配

    本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清,还有不清楚的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • JS SetInterval 代码实现页面轮询

    JS SetInterval 代码实现页面轮询

    setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式。下面通过本文给大家分享JS SetInterval 代码实现页面轮询,感兴趣的朋友一起看看吧
    2017-08-08
  • 微信页面弹出键盘后iframe内容变空白的解决方案

    微信页面弹出键盘后iframe内容变空白的解决方案

    当键盘弹出后,页脚也被顶起来;而当搜索完(要刷新整体页面),键盘缩回后,iframe里 键盘当住的地方变成白色。怎么解决这个问题呢?下面脚本之家小编给大家分享微信页面弹出键盘后iframe内容变空白的解决方案,一起看看吧
    2017-09-09
  • 原生js自定义右键菜单

    原生js自定义右键菜单

    这篇文章主要为大家详细介绍了原生js自定义右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js获取ajax返回值代码

    js获取ajax返回值代码

    这篇文章主要介绍了js如何获取ajax的返回值,需要的朋友可以参考下
    2014-04-04
  • 微信小程序日期选择器实例代码

    微信小程序日期选择器实例代码

    本文通过一段实例代码给大家介绍了微信小程序日期选择器的实现思路,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • javascript 节点遍历函数

    javascript 节点遍历函数

    火狐官网上找到的一组函数,相当于treeWalker,有了它可以方便地在IE实现Traversal API 2的所有功能
    2010-03-03
  • javascript高级模块化require.js的具体使用方法

    javascript高级模块化require.js的具体使用方法

    本篇文章主要介绍了javascript高级模块化require.js的具体使用方法,非常具有实用价值,需要的朋友可以参考下
    2017-10-10

最新评论