图片上传插件jquery.uploadify详解 |
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、下载地址 |