欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jquery.uploadify插件实现图片上传和预览效果

发布于 2014-03-14  

jquery教程

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值

零度科技原文链接:http://www.ldisp.com/a/jquery/2014/2693.shtml

上一篇:uploadify 属性(参数)中文说明
下一篇:swfupload-jquery-plugin 总结

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理