struts2 jquery ajaxFileUpload 异步上传文件

一.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("上传文件失败,请重新上传或刷新页面在上传!");
                 },
             });

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

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

时间: 2024-11-08 21:15:59

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

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

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu

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

太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.

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

实例: jsp页面 <%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E

Jquery AjaxFileUpload.js 上传文件 所遇问题解决办法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导入 AjaxFileUpload.js 文件</span> js代码 $.ajaxFileUpload({ url: 'upload',//处理图片脚本 secureuri : false, fileElementId : 'uploadImg',//file控件id da

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="../resources/css/common.css" rel="stylesheet" /> <script src="../resources/js/jquery-2.1.4.js"></script> <

JQuery插件ajaxFileUpload 异步上传文件

一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事件调用其绑定的方法,在绑定的方法中获取iframe中服务器返回的数据体(支持的普通文本,json,xml,script, html) 语法:$.ajaxFileUpload([options]) 参数说明: 1,url  上传处理程序地址,也就是我发送给服务器端所要处理上传的地址. 2,fileEl

ajaxfileupload异步上传文件

ajaxfileupload插件可以以异步方式上传文件(其实现:iframe),不像传统那样需要刷新,下面就介绍下其使用 1.HTML部分(先引入jquery): 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无刷新单文件上传</title> 6 <script src="jquery-2.2.4.min.

ajaxFileUpload 异步上传文件简单使用

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <