网上搜集的,整理一下。

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起。但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面。在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因。我的修改:

原文件:

     var oldElement = $('#' + fileElementId);

var newElement = $(oldElement).clone();
     $(oldElement).attr('id', fileId);
     $(oldElement).before(newElement);
     $(oldElement).appendTo(form);

作如下修改:

      var oldElement = $('#' + fileElementId);
      var newElement = $(oldElement).clone();
      var newElement = $(oldElement).clone(true);
      $(oldElement).attr('id', fileId);
      $(oldElement).before(newElement);
      $(oldElement).appendTo(form);

即添加这一句话:var newElement = $(oldElement).clone(true);

关于.clone()和.clone(true)的区别,这个链接给出了解释:http://blog.baiwand.com/?post=27

下面是关于ajaxFileUpload的具体使用:

options参数说明:

1、url            上传处理程序地址。  
2,fileElementId       需要上传的文件域的ID,即<input type="file">的ID。
3,secureuri        是否启用安全提交,默认为false。 
4,dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success        提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error          提交失败自动执行的处理函数。
7,data           自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type            当要提交自定义参数时,这个参数要设置成post

具体代码:

      

$.ajaxFileUpload({
type:"post",
secureuri:false,
url:'uploadFile.action',
fileElementId:'fileupload',
success:function(data,status){
},
error:function(data,status,e){
alert("上传文件失败,请重新上传或刷新页面在上传!");
},
});

二。在做ajaxFileUpload时,由于jquery 版本问题 发生 jQuery.handleError is not a function。应该是导入的jquery版本高于1.4+了,1.5+jquery重写过ajax部分内容,已经删除handleError这个方法,但是ajaxfileupload还是使用旧版本的jquery,既1.5以下的jquery方法handleError,所以报错。

handleError: function( s, xhr, status, e )      {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
} // Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
},

三.关于input中type="file"的自动提交上传的文件的解决方法;即监听input的change()时间:

       $("#fileupload").change(function(){});

struts2 jquery ajaxFileUpload 异步上传文件的更多相关文章

  1. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  2. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  3. JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  4. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  5. JQuery插件ajaxFileUpload 异步上传文件

    一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...

  6. 基于struts2的ajaxfileupload异步上传插件的使用

    服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1 ...

  7. ajaxfileupload异步上传文件

    ajaxfileupload插件可以以异步方式上传文件(其实现:iframe),不像传统那样需要刷新,下面就介绍下其使用 1.HTML部分(先引入jquery): <!DOCTYPE html& ...

  8. Jquery.form异步上传文件常见问题解决

    Jquery.form常用方法我就不多说,主要说一下在使用过程中碰到的问题 1.提示 “xxxx” is not define 或者"xxx" is not a function ...

  9. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

随机推荐

  1. maven ClassNotFoundException: org.springframework.web.context.ContextLoaderL

    信息: Starting Servlet Engine: Apache Tomcat/6.0.32 2012-3-31 9:39:40 org.apache.catalina.core.Standar ...

  2. JS:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...

  3. HDU 3306 Another kind of Fibonacci(快速幂矩阵)

    题目链接 构造矩阵 看的题解,剩下的就是模板了,好久没写过了,注意取余. #include <cstring> #include <cstdio> #include <s ...

  4. 基础DOS命令

    DOS命令: 1. 切换盘符:d: 2. 查看文件目录清单:       dir dir/s 查看所有目录及子目录下的所有内容 dir/p 分屏显示 dir/s/p 分屏显示所有内容 提前结束:ctr ...

  5. jqgrid 中的事件

    1. var obj = $("#tablename").jqGrid("getRowData"); 取得所有的行     alert(obj.length); ...

  6. 【转发】关于Java性能的9个谬论

    转载请注明出处,感谢大家的支持!本文来自优优码:http://www.uucode.net/201502/9%e4%b8%aa%e8%b0%ac%e8%ae%ba Java的性能有某种黑魔法之称.部分 ...

  7. 1.线性表-Array

    fatal.h #include <stdio.h> #include <stdlib.h> #define Error( Str ) FatalError( Str ) #d ...

  8. Apache Traffic Server(ats)

    零.前言1.官网 http://trafficserver.apache.org/2.国内社区 https://blog.zymlinux.net3.简洁明了的配置:http://blog.csdn. ...

  9. 【转】c#处理3种json数据的实例

    http://www.jb51.net/article/48027.htm http://json2csharp.chahuo.com/ 网络中数据传输经常是xml或者json,现在做的一个项目之前调 ...

  10. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...