异步上传相信大家都做过类似的功能，JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式。不过既然是JQUERY的插件那么它所依赖的环境大家都懂得。JqueryAjaxFileUploader并不华丽，也没有提供美化文件上传控件的css，它并不像jQuery File Upload（喜欢的同学可以去尝试下），提供了美观的样式和专门的图片预览、多任务上传等等， JqueryAjaxFileUploader 所拥有的很简单，只是异步上传文件的功能，当然这并不排除由你亲自为它披上一件华丽的外衣。

jQuery File Uplaod插件官方Demo:

好了言归正传，让我们一起来看下 JqueryAjaxFileUplaoder 的使用步骤：

  1. <html>
  2. <head>
  3. <base href="<%=basePath%>">
  4. <title>My starting page</title>
  5. <meta http-equiv="pragma" content="no-cache">
  6. <meta http-equiv="cache-control" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  9. <meta http-equiv="description" content="This is my page">
  10. <script type="text/javascript" src="js/jquery.js">
  11. </script>
  12. <script type="text/javascript" src="js/ajaxfileupload.js">
  13. </script>
  14. <script type="text/javascript">
  15. function ajaxFileUpload() {
  16. $("#loading").ajaxStart(function() {
  17. $(this).show();
  18. })//开始上传文件时显示一个图片
  19. .ajaxComplete(function() {
  20. $(this).hide();
  21. });//文件上传完成将图片隐藏起来
  22. $.ajaxFileUpload( {
  23. url : 'fileUpload.action',//用于文件上传的服务器端请求地址
  24. secureuri : false,//一般设置为false
  25. fileElementId : 'File',//文件上传控件的id属性
  26. dataType : 'json',//返回值类型 一般设置为json
  27. success : function(data, status) //服务器成功响应处理函数
  28. {
  29. alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
  30. if (typeof (data.error) != 'undefined') {
  31. if (data.error != '') {
  32. alert(data.error);
  33. } else {
  34. alert(data.message);
  35. }
  36. }
  37. },
  38. error : function(data, status, e)//服务器响应失败处理函数
  39. {
  40. alert(e);
  41. }
  42. })
  43. return false;
  44. }
  45. </script>
  46. </head>
  47. <body>
  48. <img src="img/loading.gif" id="loading" style="display: none;">
  49. <input type="file" id="file" name="file" />
  50. <br />
  51. <input type="button" value="上传" onclick="return ajaxFileUpload();">
  52. </body>
  53. </html>

注意：引入JS文件不要搞错了顺序，一定是先引入jQuery再引入插件。否则后果的严重性你是可以想到的。

上文中我请求了一个Action，并在Action里写好所需要的参数，以及文件格式的判断（这里我只是做的伪实现，过滤文件格式还请大家认真考虑），这个大家肯定都熟。

  1. import java.io.File;
  2. import java.io.FileInputStream;
  3. import java.io.FileOutputStream;
  4. import org.apache.struts2.ServletActionContext;
  5. import com.opensymphony.xwork2.ActionSupport;
  6. @SuppressWarnings("serial")
  7. public class FileAction extends ActionSupport {
  8. private File file;
  9. private String fileFileName;
  10. private String fileFileContentType;
  11. private String message = "你已成功上传文件";
  12. public String getMessage() {
  13. return message;
  14. }
  15. public void setMessage(String message) {
  16. this.message = message;
  17. }
  18. public File getFile() {
  19. return file;
  20. }
  21. public void setFile(File file) {
  22. this.file = file;
  23. }
  24. public String getFileFileName() {
  25. return fileFileName;
  26. }
  27. public void setFileFileName(String fileFileName) {
  28. this.fileFileName = fileFileName;
  29. }
  30. public String getFileFileContentType() {
  31. return fileFileContentType;
  32. }
  33. public void setFileFileContentType(String fileFileContentType) {
  34. this.fileFileContentType = fileFileContentType;
  35. }
  36. @SuppressWarnings("deprecation")
  37. @Override
  38. public String execute() throws Exception {
  39. String path = ServletActionContext.getRequest().getRealPath("/upload");
  40. try {
  41. File f = this.getFile();
  42. if(this.getFileFileName().endsWith(".exe")){
  43. message="对不起,你上传的文件格式不允许!!!";
  44. return ERROR;
  45. }
  46. FileInputStream inputStream = new FileInputStream(f);
  47. FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
  48. byte[] buf = new byte[1024];
  49. int length = 0;
  50. while ((length = inputStream.read(buf)) != -1) {
  51. outputStream.write(buf, 0, length);
  52. }
  53. inputStream.close();
  54. outputStream.flush();
  55. } catch (Exception e) {
  56. e.printStackTrace();
  57. message = "对不起,文件上传竟然失败了!!!!";
  58. }
  59. return SUCCESS;
  60. }
  61. }

还有重要的一步，配置Struts配置文件，一定要注意的是Action中result的配置contentType参数是一定要有的，否则浏览器总是提示将返回的JSON结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json，而ajaxfileupload则要求为text/html。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
  3. <struts>
  4. <package name="struts2" extends="json-default">
  5. <action name="fileUpload" class="com.ajaxfile.action.FileAction">
  6. <result type="json" name="success">
  7. <param name="contentType">
  8. text/html
  9. </param>
  10. </result>
  11. <result type="json" name="error">
  12. <param name="contentType">
  13. text/html
  14. </param>
  15. </result>
  16. </action>
  17. </package>
  18. </struts>

Ok就是这样，要动手的同学马上Coding吧。顺便提供下JqueryAjaxFileUploader的JS文件。

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传的更多相关文章

  1. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  2. HTML5——摒弃插件和前端框架的异步文件上传

    之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...

  3. extjs实现简单的多文件上传（不借助任何插件）,以及包含处理上传大文件的错误的各种处理办法

    在extjs的学习过程中,有遇到过有关多文件上传的问题,但是网上的大多数都是专门的去实现多文件上传而去做的组件之类的,没有特别简单的方式,于是小白便做了下面的内容,只是通过动态的去添加extjs的自带 ...

  4. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  5. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  6. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  7. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  8. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  9. 全网最简单的大文件上传与下载代码实现（React+Go）

    前言 前段时间我需要实现大文件上传的需求,在网上查找了很多资料,并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能. 我的项目是个比较简单的项目,并没有采用特别复杂的实现方式,所以我这篇文章的目 ...

随机推荐

  1. Initializing a Build Environment

    This section describes how to set up your local work environment to build the Android source files. ...

  2. Protocol Buffer详解

    1.Protocol Buffer 概念 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48,162 ...

  3. http://www.blogjava.net/nokiaguy/category/37087.html

    http://www.blogjava.net/nokiaguy/category/37087.html

  4. UNIX环境下用C语言写静态库与动态库

    静态库,动态库用UNIX 的术语来说,或者叫做归档文件(archive 常以.a 结尾)和共享对象(share object 常以lib 开头.so 结尾)更为准确.静态库,动态库可能是WINDOWS ...

  5. IDEA使用docker进行调试

    背景 手头有个任务,需要用java通过jni调用一个开源算法库gmssl的功能,但是gmssl只提供了源码,需要编译后才能使用.按照通常的做法,我们会部署好centos的虚拟机和开发环境,安装好gms ...

  6. LINQ标准查询操作符（一）——select、SelectMany、Where、OrderBy、OrderByDescending、ThenBy、ThenByDescending和Reverse

    一.投影操作符 1. Select Select操作符对单个序列或集合中的值进行投影.下面的示例中使用select从序列中返回Employee表的所有列: //查询语法 var query = fro ...

  7. JavaScript 继承方式详解

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继 ...

  8. 转】腾讯云CentOS 6.6安装 Nginx

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/5290155.html 感谢! 一.下载Nginx 从Nginx的官网(http://nginx.org/en/d ...

  9. [转]模拟HttpContext 实现ASP.NET MVC 的单元测试

    众所周知 ASP.NET MVC 的一个显著优势即可以很方便的实现单元测试,但在我们测试过程中经常要用到HttpContext,而默认情况下单元测试框架是不提供HttpContext的模拟的,本文通过 ...

  10. spring MVC 如何查找URL对应的处理类

    在spring 3.1之前,查找URL相应的处理方法,需要分两步,第一步是调用DefaultAnnotationHandlerMapping,查找到相应的controller类,第二步,再调用Anno ...