ajaxFileUpload上传文件

最新推荐文章于 2021-11-18 14:58:08 发布

淘金者05012

最新推荐文章于 2021-11-18 14:58:08 发布

阅读量494

点赞数

分类专栏：积累分享文章标签： ajaxFileUpload uploa

本文链接：https://blog.csdn.net/u011411069/article/details/55003767

版权

积累分享专栏收录该内容

46 篇文章 1 订阅

订阅专栏

解决前台在上传大文件时会造成的页面长时间无法响应,或者像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="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;
  }
}