V.Zhang And His Friends' Club

 找回密码
 加入我们

QQ登录

只需一步,快速开始

搜索
您可以使用eMule或eMule Mod(参见eMuleFans.com的Mod页emule-mods.de的Mod页)(Windows)、aMule(Win、Linux、Mac)等软件下载eD2k链接。可以参考这里的修复、关联eD2k协议链接方法
eMule收藏集(.emulecollection)文件是您选中的所有链接的列表文件。eMule可以直接下载它们。
按住SHIFT键选择可以选中多个选择框。
可用文件名和大小选择器来选择文件。
查看eD2k Link Selector php类主页可以下载此php类或联系作者。
查看eD2k Link Selector WordPress 插件主页可以下载WordPress插件。
文件名选择器帮您根据文件名称或后缀来选择文件。不分大小写。
符号使用:
和:空格( )、+
不包含:-
或:|
转义:一对英文引号("");
匹配开头:^
匹配结尾:$
例如:
选中所有名称中包含有“eMule”或“0.49c”字眼,但不包含有“exe”字眼的:emule|0.49c -exe
选中所有名称的开头是“eMule”,结尾是“0.49c”的:^emule 0.49c$
选中所有名称中带有“eMule 0.49c”的(必须是“eMule 0.49c”,中间没有别的字符,不能是“eMule fake 0.49c”),需要转义:"emule 0.49c"
大小选择器帮您根据文件大小选择文件。
课程源码与笔记开放免费下载Flash AS3游戏开发视频教程JavaSE核心技术视频教程JSP/Servlet视频教程Oracle视频教程
Struts2.3.4视频教程Hibernate4.1.4视频教程Spring3.1.1视频教程JavaSE项目实战视频教程SSH项目实战视频教程
查看: 19450|回复: 23

vzAjaxFileUpload1.0使用教程

[复制链接]
发表于 2012-6-5 12:13:41 | 显示全部楼层 |阅读模式

一、下载压缩包vzAjaxFileUpload1.0.zip,解压后压缩包内文件如图所示:


vzAjaxFileUpload1.0目录结构

vzAjaxFileUpload1.0目录结构


vzAjaxFileUpload1.0下载:vzAjaxFileUpload1.0(伪Ajax异步文件上传插件)发布


  • demo:示例Web项目
  • lib:所需jar包,包含:vzAjaxFileUpload1.0.jar、commons-fileupload-1.2.2.jar、commons-io-2.1.jar
  • src:vzAjaxFileUpload1.0源代码
  • vzAjaxFileupload:所需js文件,包含:vzAjaxFileupload1.0.js、jquery-1.7.2.min.js
  • WebRoot:无用文件夹(忘记删除了)
  • ReadMe.txt:说明文件,里面有简要使用步骤

二、在您的JavaWeb项目里面引入相关jar包


引入lib目录下面的所有jar包即可,如果项目里面已有commons-fileupload-1.2.2.jar、commons-io-2.1.jar则可不用引入。



三、在您的Web项目的web.xml配置文件配置vzAjaxFileUpload处理文件上传的Servlet

  1. <servlet>
  2.         <servlet-name>FileUploadServlet</servlet-name>
  3.         <servlet-class>net.vzhang.ajaxfileupload.FileUploadServlet</servlet-class>
  4.         <!--
  5.                 uploadDir, uploadTempDir, allowableMaxSize初始化参数均可选
  6.                 若不配置,则以下面的配置为默认配置
  7.         -->
  8.         <init-param>
  9.                 <!-- 文件上传的目录 -->
  10.                 <param-name>uploadDir</param-name>
  11.                 <param-value>upload/</param-value>
  12.         </init-param>
  13.         <init-param>
  14.                 <!-- 文件上传的临时目录 -->
  15.                 <param-name>uploadTempDir</param-name>
  16.                 <param-value>upload/temp/</param-value>
  17.         </init-param>
  18.         <init-param>
  19.                 <!-- 允许上传文件的最大字节数 -->
  20.                 <param-name>allowableMaxSize</param-name>
  21.                 <param-value>2097152</param-value>
  22.         </init-param>
  23.         <init-param>
  24.                 <!-- 允许上传的文件扩展名列表,不配置则为:"" -->
  25.                 <param-name>allowableExtension</param-name>
  26.                 <param-value>gif,jpg,png,zip,rar,7z,xlsx</param-value>
  27.         </init-param>
  28. </servlet>
  29. <servlet-mapping>
  30.         <servlet-name>FileUploadServlet</servlet-name>
  31.         <url-pattern>/vzAjaxFileupload/fileupload.do</url-pattern>
  32. </servlet-mapping>
复制代码

三、配置Apache Commons Fileupload清理临时文件夹的Listener(可选)

上传文件大小超过512KB(vzAjaxFileupload默认)会产生临时文件,那么上传文件后需要清理掉这些临时文件,当然vzAjaxFileupload自身作了一些简单处理,其实这个Listener可以不用配置,在测试中不论上传文件成功与否都能清理掉所产生的临时文件。当然为了保险起见,您可以将此Listener配置起来。

  1. <listener>
  2.     <!-- 清理临时文件夹的Listener(可选配置) -->
  3.     <listener-class>org.apache.commons.fileupload.servlet.FileCleanerCleanup</listener-class>
  4. </listener>
复制代码

四、至此,现在就可以在您需要上传文件的页面上使用vzAjaxFileupload了(可直接查看demo/index.jsp)

1、在页面上引入jQuery的js和vzAjaxFileupload的js库

当然首先的把vzAjaxFileupload中的js文件加入到您的项目中,如果您已加入了jQuery的库,则可不用引入jQuery。

  1. <script type="text/javascript" src="vzAjaxFileupload/jquery-1.7.2.min.js"></script>
  2. <script type="text/javascript" src="vzAjaxFileupload/vzAjaxFileupload1.0.js"></script>
复制代码

2、例如,现在有这样一个表单,需要提交数据

vzAjaxFileUpload1.0示例

vzAjaxFileUpload1.0示例

代码如下:

  1. <h1>vzAjaxFileUpload1.0示例</h1>
  2. <form action="register.do" method="post">
  3. 姓名:

  4. <input id="username" type="text" name="username"/>


  5. 头像:

  6. <input id="headface" type="file" name="headface"/>
  7. <input type="button" value="上传" onclick="upload('headface', this)"/>


  8. <input type="submit" value="提交"/>   
  9. <input type="reset" value="重置"/>
  10. </form>
  11. <span>官方网站:
  12. <a href="http://www.vzhang.net" target="_blank">www.vzhang.net</a>
  13. </span>
复制代码

注意:对于此表单来讲,不负责提交文件,其实最终是提交的文件上传后的地址,是普通参数,所以不用管此表单的method属性和enctype属性。

3、为“上传”按钮添加onclick事件处理的JavaScript函数即可(upload('headface', this))

  1. <script type="text/javascript">
  2. function upload(fileInpuId, submitObj) {
  3.         var options = {
  4.                 //必须,文件上传框的id
  5.                 inputEltId: fileInpuId,
  6.                 //可选,默认为callback
  7.                 callbackFunName: "uoploadCallback",
  8.                 //可选,默认为vzAjaxFileupload/fileupload.do
  9.                 action: "vzAjaxFileupload/fileupload.do",
  10.                 //可选,调用此方法的元素,可将此元素在上传请求提交隐藏
  11.                 submitElt: submitObj  
  12.         };
  13.         //调用VZAjaxFileUpload将相关参数(JSON对象)传入即可完成上传
  14.         new VZAjaxFileUpload(options);
  15. }

  16. function uoploadCallback(data) {
  17.         /*
  18.          * 返回数据data说明(JSON):
  19.          * {
  20.          *  state:上传状态,
  21.          *  message: 消息,
  22.          *  fileName: 上传后的文件名(含路径)
  23.          *  allowableExtension: 允许上传的文件扩展名
  24.          *  allowableMaxSize: 允许上传文件的最大字节数
  25.          *  inputEltId: 被替换掉的文本输入框的ID,即上传时文件输入框的ID
  26.          * }
  27.          * 上传状态state:
  28.          *  0: UPLOAD_SUCCESS, 上传成功
  29.          * -1: UNKNOWN_ERROR, 未知错误
  30.          *  1: SIZE_TOO_LARGE, 上传的文件超过允许大小
  31.          *  2: EXTENSION_UNALLOWABLE, 上传的文件扩展名不被允许
  32.          */
  33.         if(data.state == 0) {
  34.                 $("#" + data.inputEltId).val(data.fileName);
  35.         } else {
  36.                 $("#" + data.inputEltId).val(data.message);
  37.         }
  38. }
  39. </script>
复制代码

说明:

  • 点击“上传”按钮后,即将文件上传,并将原文件输入框替换成文本输入框,新文本框的id、name、style、class、size属性与原文件输入框完全一致;
  • “上传”按钮将隐藏,也可以不隐藏,不传入submitObj参数即可;
  • 通过回调函数即可拿到文件上传后的相关信息。

五、结语

同时您可以根据自己需要修改处理文件上传的Servlet和vzAjaxFileupload1.0.js源代码,朋友们在使用过程中遇到问题可反馈于我,非常感谢。

对于此插件的功能将会根据朋友们使用后的体验反馈作改进,并发布新版本,希望朋友们可以帮助完善此插件,感激之至。


回复

使用道具 举报

发表于 2012-6-5 16:54:06 | 显示全部楼层
什么时候能出个.Net版本的啊?

点评

非常好  发表于 2013-4-9 13:11
暂无此打算,因为我对.Net方向根本不熟悉。  发表于 2012-6-5 17:04
回复 支持 反对

使用道具 举报

发表于 2012-7-9 16:22:23 | 显示全部楼层
这好东东。回头去试下!!!!
回复 支持 反对

使用道具 举报

发表于 2012-7-18 17:14:12 | 显示全部楼层
顶啊!
回复 支持 反对

使用道具 举报

发表于 2012-7-30 12:31:17 | 显示全部楼层
这好东东。回头去试下!!!!
回复 支持 反对

使用道具 举报

发表于 2012-8-28 19:27:34 | 显示全部楼层
回复 下载 学习 ...
回复 支持 反对

使用道具 举报

发表于 2012-9-12 13:02:19 | 显示全部楼层
不错,异步有时是很必要的
回复 支持 反对

使用道具 举报

发表于 2012-9-18 11:39:11 | 显示全部楼层
这里  学习java的好地方,各类只是都有
回复 支持 反对

使用道具 举报

发表于 2012-9-18 11:40:01 | 显示全部楼层
我的目标是多发贴,尽快转为 贵宾
回复 支持 反对

使用道具 举报

发表于 2012-9-18 11:42:49 | 显示全部楼层
收了,辛苦了张老师
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

QQ|Email to V.Zhang|小黑屋|手机版|Archiver|V.Zhang And His Friends' Club ( 渝ICP备08003756号|渝公网备500103015-00920  

GMT+8, 2019-9-17 12:41 , Processed in 0.268199 second(s), 30 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表