网上搜集的,整理一下。

一.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. iOS宏和__attribute__

    本文目录 iOS宏的经典用法 Apple的习惯 __attribute__ iOS宏的经典用法 1.常量宏.表达式宏 #define kTabBarH (49.0f) #define kScreenH ...

  2. Spring基础学习笔记-Bean的基础知识

    一. Bean的定义,初始化,使用和销毁 二.ref指定依赖的三种模式 三.Bean的五种自动装配模式(autowire) 四.Bean依赖检查的4种模式:配合atuowire使用,dependenc ...

  3. UIPickerView理解

  4. Android课程---关于数据存储的学习(2)

    手机外部存储的学习 activity_data2.xml <?xml version="1.0" encoding="utf-8"?> <Li ...

  5. hihoCoder 1184 连通性二·边的双连通分量

    #1184 : 连通性二·边的双连通分量 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在基本的网络搭建完成后,学校为了方便管理还需要对所有的服务器进行编组,网络所的老 ...

  6. 一起来做chrome扩展《基础介绍》

    首先说明,chrome的扩展并不它的插件,网上很多说写插件,其实都是说的扩展.写扩展并不复杂,只要根据chrome提供的一系列的API进行就可以实现很多的功能.只是对API的学习是有代价的,加上国内访 ...

  7. 看懂SqlServer查询计划【转】

    原文链接:http://www.cnblogs.com/fish-li/archive/2011/06/06/2073626.html 开始 SQL Server 查找记录的方法 SQL Server ...

  8. Nodejs:fs模块 & rimraf模块

      模块fs:可以通过他管理文件系统,文件的写入,删除等操作 模块rimraf: 递归删除文件的node插件,在项目的文件编译之前,可以清除dist文件夹里的内容   API样例: var fs = ...

  9. nginx tomcat 动静分离

    所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件</span>,从而达到动静页面 ...

  10. es6 ajax

    简单的co用例: var co=require("co") class view{ constructor(){ co(function*(){ var p1=this.ajax1 ...