ajaxFileUpload上传文件

解决前台在上传大文件时会造成的页面长时间无法响应,或者像ajax请求那样上传成功做响应的处理就可使用此插件,ajax目前是无法上传文件的,插件只是实现了类似的异步效果,原理就是在上传文件时动态将选中文件的input移到一个临时创建的你看不到的iframe中,同时再复制一个文件上传input放在原来的位置上,由临时的iframe发起上传请求,所以主页面不会同步卡死,同时监听临时iframe内容,当返回新内容时(即上传成功后台返回数据)再将内容返给主页面

前台Html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
</head>
<body><img id="loading" src="data:image/load.gif" style="display: none;background:#ccc;"> User:<input name="username" value="user" /><br /><span id="file">File:<input id="fileToUpload" type="file" name="upload" multiple /></span><br /><input id="upload" type="button" value="upload" οnclick="return ajaxFileUpload();" /><input type="button" value="alert" οnclick="alert('zzzzzzzzzzzzzz');" /><button οnclick="testJSON();" style="width:54px;height:22px;">JSON</button><div id="text"><h2>后台测试文本</h2></div><script type="text/javascript">function testJSON(){$.getJSON("test_testJSON",{},function(data){$("#text").append(JSON.stringify(data));});}function ajaxFileUpload() {  /* if($("#file").val().length<1){alert("上传文件不能为空!!!");return false;} */$("#loading").show();$("#upload").attr("disabled","disabled");$("#file").hide();$.ajaxFileUpload({  url : 'test_upload',// servlet请求路径  secureuri : false,  fileElementId : 'fileToUpload',// 上传控件的id  dataType : 'json',  data : {username : $("#username").val()}, // 其它请求参数  success : function(data, status) {  alert(JSON.stringify(data));$("#loading").hide();$("#upload").removeAttr("disabled");$("#file").show();},  error : function(data, status, e) { alert('上传出错');  }  })  return false;  }  </script>
</body>
</html>

后台Action

@Controller("testAction")
@Scope("prototype")
public class TestAction extends ActionSupport
{private File upload;private String uploadFileName;private String uploadContentType;private Object ret;public String toUpload(){return "upload";}public String upload() {System.out.println(this.upload.length());System.out.println(this.uploadFileName);System.out.println(this.uploadContentType);this.ret = "upload successful!!!";return "ajax";}public String testJSON(){List list = new ArrayList();for (int i = 0; i < 100000; i++) {list.add("stuno:" + i + ";name:name" + i);}this.ret = list;return "ajax";}public File getUpload() {return this.upload;}public void setUpload(File upload) {this.upload = upload;}public String getUploadFileName() {return this.uploadFileName;}public void setUploadFileName(String uploadFileName) {this.uploadFileName = uploadFileName;}public String getUploadContentType() {return this.uploadContentType;}public void setUploadContentType(String uploadContentType) {this.uploadContentType = uploadContentType;}public Object getRet() {return this.ret;}public void setRet(Object ret) {this.ret = ret;}
}

ajaxFileUpload上传文件相关推荐

ajaxFileUpload上传文件后提示下载的问题
在某些版本浏览器下ajaxFileUpload上传文件会提示下载, 1:为什么? 可以观察到,即便返回 JsonResult 在返回的头中也没有任何消息体,直接理解为文本了. 2:解决方案前端: f ...
解决ajaxFileUpload上传文件在ie浏览器中出现下载框的问题
在开发时用到ajaxFileUpload上传文件,在ie浏览器中会出现下载框的问题,结合网上查到的资料最后解决,在此记录一下,以免以后遇到不知道怎么解决, 前端: 后台: ps:返回值有list改为j ...
ajaxfileupload上传文件问题
一.ajaxfileupload在新版的jQuery中会报jQuery.handleError is not a function 解决办法: 在Ajaxfileupload.js中追加方法: han ...
jQuery插件之ajaxFileUpload上传文件或图片
我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://files.cnblogs.com/files/kissdodog/a ...
jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传,用live()方法来绑定 file表单的change事件就能够解决,直接$("xxx").change( ...
ajaxfileupload 返回值_用ajaxFileUpLoad上传文件不能正确取得返回值的问题
c++ eof()函数 C++ eof()函数可以帮助我们用来判断文件是否为空,抑或是判断其是否读到文件结尾.在这里我们将会对其进行详细的介绍. C++编程语言中的很多功能在我们的实际应用中起着非常大 ...
ajaxFileUpload plugin上传文件 chrome、Firefox中出现SyntaxError:unexpected token
使用ajaxFileUpload上传文件时遇到的一些问题,原本在本地用IE8测试一切正常.. 1.然后QA用Chrome测试之后说不能上传文件,报错(文件名获取) HTML 代码: <table ...
jq ajax异步上传文件,jQuery插件ajaxFileUpload异步上传文件
AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能,选择它因为它的配置 ...
ajaxfileupload 返回值_ajaxfileupload上传文件，返回json数据报错的问题。
在使用ajaxfileupload上传文件的时候,文件上传成功了,但是返回的json数据一直解析不了.一直提示:Resource interpreted as Document but transfe ...
[原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...

ajaxFileUpload上传文件

ajaxFileUpload上传文件相关推荐

最新文章

热门文章