异步上传相信大家都做过类似的功能，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. cocoa中获取时间

    头文件#import "Foundation/NSCalendarDate.h" + (id)calendarDate; - (int)yearOfCommonEra;- (int ...

  2. html中的div、td 、p 等容器内强制换行和不换行的实现

    div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:< ...

  3. CSS概述<选择器总结>

    概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...

  4. 【LeetCode】28 - Implement strStr()

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  5. Chapter12：动态内存

    智能指针——shared_ptr 为了更容易地使用动态内存,新的标准提供了智能指针来管理动态对象.智能指针的行为类似常规指针,重要的区别是它负责自动释放指向的对象. 智能指针的使用方式与普通指针类似. ...

  6. 设计模式 外观 Facade

    外观模式的作用是简化接口.它提供一个统一的接口用来访问子系统的一群接口.通过这个高层接口使子系统更容易使用. 同时,通过外观将客户从组件的子系统中解耦. Head 1st中使用了家庭影院的例子来说明外 ...

  7. 在VS2103环境中集成Doxygen工具

    自己已将学习了两三次了吧,差不多这次该总结一下: Doxygen是一种开源跨平台的,以类似JavaDoc风格描述的文档系统,完全支持C.C++.Java.Objective-C和IDL语言,部分支持P ...

  8. 60个响应式的Web设计教程–能够手机访问！

    想要学习响应式[responsive:屏幕自适应的效果]的网页设计和开发技术?在这个超大的收藏集合中,我想你定会找到想要开始学习的响应式网页设计教程. 面对超过1亿的手机互联网用户,开发专业和用户友好 ...

  9. xe mysql

    [FireDAC][Phys][MySQL]-314. Cannot load vendor library [libmysql.dll or libmysqld.dll]. The specifie ...

  10. MVC中过虑特殊字符检测

    [ValidateInput(false)] [HttpPost] public ActionResult Modify(Models.BlogArticle model) { //...... } ...