jquery uploadify和apache Fileupload实现异步上传文件示例
jQuery Uploadify + Apache Fileupload异步上传文件示例 FileUploadServlet 复制代码 代码如下: package com.xiaoxing.upload; import java.io.File; import javax.servlet.ServletException; import org.apache.commons.fileupload.FileItem; /** } test_upload.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Uploadify + Apache Fileupload异步上传文件示例(2014-5-3)</title> <link rel="stylesheet" type="text/css" href="/js/uploadify/uploadify.css"> <script src="/js/jquery-1.9.0.js"></script> <script src="/js/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript"> $(function() { $('#fileupload').uploadify({ 'method' : 'post', 'buttonText' : 'flash上传文件', 'fileSizeLimit' : '1024KB', 'fileTypeExts' : '*.gif; *.jpg; *.png', 'swf' : '/js/uploadify/uploadify.swf', 'uploader' : '/upload',//这是上传图片的路径,也就是我在web.xml里配置的servlet 'onUploadSuccess' : function(file,data,response) { //图片上传成功后返回数据在这里处理 var ary = eval("(" + data + ")").rows; for(var i = 0; i < ary.length; i++) { $("#J_div").append("<img alt='图片' src='/upload/images" + ary[i].name + "' width='200px' height='200px'>"); } } }); }); </script> </head> <body> <h2>jQuery Uploadify + Apache Fileupload异步上传文件示例(2014-5-3)</h2> <p>1、可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可);</p> <p>2、后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传;</p> <p>3、文件上传目录可以任意指定,请在web.xml中配置;</p> <p>4、对于已经上传的图片没有查询到这个页面上,这部分留给你去做吧。</p> <p>Uploadify api 详见http://www.uploadify.com/documentation/</p> <p style="color: red">*如果你对本示例感兴趣并想了解更多,欢迎加入Java私塾在线学习社区(329232140)。</p> <input id="fileupload" type="file" name="img" multiple="multiple"/> <div id="J_div"></div> </body> </html> web.xml 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" metadata-complete="true" version="3.0"> <welcome-file-list> <welcome-file>test_upload.html</welcome-file> </welcome-file-list> <servlet> <description>专门用来处理上传操作的servlet</description> <servlet-name>FileUploadServlet</servlet-name> <servlet-class>com.xiaoxing.upload.FileUploadServlet</servlet-class> <init-param> <description>文件存放的正式目录,可以自己配置</description> <param-name>uploadDir</param-name> <param-value>/upload/images/</param-value> </init-param> <init-param> <description>文件存放的临时目录,可以自己配置,里的文件由下面配置的监听器自动删除。</description> <param-name>tempUploadDir</param-name> <param-value>/upload/temp</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>FileUploadServlet</servlet-name> <url-pattern>/upload</url-pattern> </servlet-mapping> <listener> <description>临时文件资源清理,工具包自带,不用我们来写</description> <listener-class>org.apache.commons.fileupload.servlet.FileCleanerCleanup</listener-class> </listener> </web-app> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |