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

xiaoxiao2021-02-28  113

1、js代码: 

[javascript]  view plain  copy <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、下载地址 www.uploadify.com/download/
转载请注明原文地址: https://www.6miu.com/read-22224.html

最新回复(0)