jQuery Uploadify + Apache Fileupload异步上传文件示例
1、可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可);
2、后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传;
3、文件上传目录可以任意指定,请在web.xml中配置;
Uploadify api 详见http://www.uploadify.com/documentation/
FileUploadServlet
[url=/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>