异步上传相信大家都做过类似的功能，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. Yii入门，登录

    验证和授权在页面需要限制访问时用到.验证就是确认某人就是他所声称的那个人.通常涉及到用户名和密码,但也包含其他方式,例如智能卡,指纹等.授权是在验证用户后,查明他是否被允许管理指定的资源.通常判断他是 ...

  2. JAVA 锁

    JAVA 锁 锁的概念 Java中的锁是控制资源访问的一种方式.它弥补了synchronized的可操作性不强的不足. Java的锁都实现了Lock接口.Lock结构定义了锁的基本操作. 函数 解释 ...

  3. Php 笔记2-----手机端 与 php服务器的通信

    对于 手机端 和 php服务器的通信,是不存在表单这一概念的  ,除非自己去实现, 所以通常情况下步骤是: 假定上传的是字符串. 1  手机端的流程是 把文件或者字符串,转化为 特定的流. 2 通过h ...

  4. As3 常用日期工具

    package com.lj.utils { import mx.controls.DateField; import mx.controls.dataGridClasses.DataGridColu ...

  5. 网页元素定位神器之Xpath详解

    摘要: 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. ...     ...

  6. 关于Cygwin的x-Server的自动运行以及相关脚本修改

    常常需要用到远端服务器的图形工具,如果在windows端没用xserver的话,很多程序无法运行.一个特殊的例子,emacs在没用xserver的时候,是直接在终端中打开的,如果不修改cygwin.b ...

  7. NET知识大纲

    第一部分 C#编程基础 1.(30)变量.运算符(+.-.*./.++.--.括号.==.!=.>.<.>=.<=.&&.||).流程控制(if.while.f ...

  8. Spring Boot 学习笔记 - 认识Spring Boot框架

    因各种原因,.NET前端工程师重新接触JAVA,真是向全栈的路上又迈出了无奈的一步. 下面正文: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初 ...

  9. matlab的&amp;和&amp;&amp;操作

    A&B(1)首先判断A的逻辑值,然后判断B的值,然后进行逻辑与的计算.(2)A和B可以为矩阵(e.g. A=[1 0],B=[0 0]).A&&B(1)首先判断A的逻辑值,如果 ...

  10. MVC&&MVP

    Classic MVC Classic MVC 大概上世纪七十年代,Xerox PARC的Trygve提出了MVC的概念. 并应用在Smalltalk系统中,为了和其它类型的MVC加以区分,历史上习惯 ...