异步上传相信大家都做过类似的功能，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. [再寄小读者之数学篇](2014-11-24 Abel 定理)

    设幂级数 $\dps{g(x)=\sum_{n=0}^\infty a_nx^n}$ 在 $|x|<1$ 内收敛, 且 $\dps{\sum_{n=0}^\infty a_n=s}$ 收敛. 则 ...

  2. Matlab命令——目录操作（windows&Linux）

    Matlab命令——目录操作(windows&Linux) 1. filesep用于返回当前平台的目录分隔符,Windows是反斜杠(\),Linux是斜杠(/).有时此命令结合ispc命令使 ...

  3. Sunday算法（字符串查找、匹配）

    字符串查找算法中,最著名的两个是KMP算法(Knuth-Morris-Pratt)和BM算法(Boyer-Moore).两个算法在最坏情况下均具有线性的查找时间.但是在实用上,KMP算法并不比最简单的 ...

  4. 【转】What's the difference between simulation and emulation

    摘要:这2个单词 还是用英文解释,比较准确.按我的理解:simulation就是模拟,可以做些改变. emulation是仿真,是按照原来的样子进行部署,不可以改变. Yes, the concept ...

  5. Python进程和线程

    引入进程和线程的概念及区别 1.线程的基本概念 概念 线程是进程中执行运算的最小单位,是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但 ...

  6. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  7. 使用Maven将Hadoop2.2.0源码编译成Eclipse项目

    编译环境: OS:RHEL 6.3 x64 Maven:3.2.1 Eclipse:Juno SR2 Linux x64 libprotoc:2.5.0 JDK:1.7.0_51 x64 步骤: 1. ...

  8. 服务器多块磁盘 ,同时磁盘类型混合(SSD+STAT+SAS)

    服务器多块磁盘 ,同时磁盘类型混合(SSD+STAT+SAS)

  9. Jquery 等待ajax返回数据loading控件ShowLoading组件

    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...

  10. CST和GMT时间的区别

    CST和GMT时间的区别 今天遇到一个奇怪的问题,在服务器端通过 c# 获取当前时间为 Fri Aug 28 09:37:46 CST 2009, 转化为 GMT时间为:28 Aug 2009 01: ...