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

最新推荐文章于 2017-01-19 09:58:30 发布

ZLHZHJ

最新推荐文章于 2017-01-19 09:58:30 发布

阅读量2.6k

点赞数

分类专栏： jquery 文章标签： servlet function xhtml jsp 服务器 jquery

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果，首页我们要看看关于利用jquery uploadify上传图片要注意事项吧。

注意事项

　　(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、下载地址

　　www.uploadify.com/download/

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>实现图片上传和预览效果jquery.uploadify插件</title>
</head>

<body>
<script type="text/网页特效">
　　$(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/"+res ponse);
　　$('#image').show();
　　$('#photo').attr("value",response);
　　},
　　'onerror' : function(event, queueid, fileobj){
　　 alert("文件:" + fileobj.name + " 上传失败");
　　}
　　});
　　});
　　</script>

</body>
</html>