Ajax上传文件

Posted 2020-09-15 gavanwanggw

先上效果图

 

 

 

基于EazyUI开发

眼下的单文件上传，还是伪进度条的，
至于做成真正动态的进度条 须要ajax去后台获取文件大小跟总大小，
考虑眼下项目文件都是10MB下面 所以就用了个伪进度条

 

上代码

html

<form id="fileload" action="/ProcessDeployment/upload"  target="fileupload" enctype="multipart/form-data" method="post">
	<table style="line-height: 30px; width:420px; margin:0px auto;">
		<tr>
			<td style="text-align: right;">流程名称：</td>
			<td><input id="txtProcessName" name="txtProcessName" class="easyui-textbox"
				style="width:300px;" /></td>
		</tr>
		<tr>
			<td style="text-align: right;">流程文件：</td>
			<td><input id="txtFile" name="txtFile" data-options="buttonText: ‘选择zip文件‘"
				class="easyui-filebox" style="width:300px;" /></td>
		</tr>
	</table>
</form>
<iframe style="display:none" name="fileupload"></iframe>
<div
	style="text-align:center; line-height:50px; width:420px; margin:0px auto;">
	<button id="btnSave" class="easyui-linkbutton"
		data-options="iconCls:‘icon-save‘" style="width:70px;">保存</button>
	<button id="btnCancel" class="easyui-linkbutton"
		data-options="iconCls:‘icon-cancel‘" style="width:70px;">取消</button>
</div>

 

js

<p>try {
 debugger;
 $(function() {
  $("#btnCancel").bind("click", function() {
   $(‘#win‘).window(‘close‘);
  });</p><p>  $("#btnSave").bind("click", function() {
   debugger;
   var processName = $("#txtProcessName").textbox("getValue");
   if (processName == "") {
    $.messager.alert(‘系统消息‘, ‘请填写流程名称。‘, ‘info‘);
    return;
   }
   var filebox = $("#txtFile").filebox("getValue");
   if (filebox == "") {
    $.messager.alert(‘系统消息‘, ‘请选择流程文件。‘, ‘info‘);
    return;
   } else {
    if (filebox.toLowerCase().lastIndexOf(".zip") < 0) {
     $.messager.alert(‘系统消息‘, ‘请选择zip格式的文件。
‘, ‘info‘);
     return;
    }
   }
   $.messager.confirm(‘系统消息‘, ‘您确定保存吗？‘, function(r) {
    if (r) {
     $.messager.progress({
      title : ‘系统消息‘,
      msg : ‘文件上传中...‘
     });
     setTimeout(function() {
      $("#fileload").submit();
      var t = setInterval(function(){
       $.post("/ProcessDeployment/cheackLoad",{flag:new Date().getTime()},function(data){
        if(data.Result==true)
        {
         clearInterval(t);
         $.messager.progress(‘close‘);
         $.messager.alert(‘系统消息‘, ‘文件上传成功。
‘, ‘info‘);
         $(‘#win‘).window(‘close‘);
         $(‘#dg‘).datagrid(‘reload‘);    
        }

        if(data.Result==false){
         clearInterval(t);
         $.messager.alert(‘系统消息‘, ‘文件上传失败。
‘, ‘info‘);
        }
       });
       
      }, 1000);
     }, 1000);
    }
   });
  });
 });</p><p>} catch (e) {</p><p>}
</p>

 后台使用的是Jfinal

Controller

public void uploadindex()
  {
   setSessionAttr(GlobalKey.FileIsLoaded, "");
   render("upload.jsp");
  }
  public void cheackLoad()
  {
   Map<String, Object> map=new HashMap<String, Object>();
   map.put("Result", getSessionAttr(GlobalKey.FileIsLoaded));
   renderJson(JsonKit.toJson(map));
  }

public void upload()
  {
   UploadFile file=null;
   InputStream in=null;
   ZipInputStream zipInputStream=null;
   try {
    //保存文件
    file = getFile("txtFile");
    String processName = getPara("txtProcessName");
    in = new FileInputStream(file.getFile());
    //InputStream in=this.getClass().getClassLoader().getResourceAsStream("diagrams/"+file.getFile().getName());
    zipInputStream=new ZipInputStream(in);
    
    Deployment deployment= processEngines.getRepositoryService().createDeployment().name(processName).addZipInputStream(zipInputStream).deploy();
    //----------------------------
    System.out.println("部署ID："+deployment.getId());
    System.out.println("部署名称:"+deployment.getName());
    //----------------------------
    zipInputStream.close();
    in.close();
    //代表部署成功，那么就删掉这个文件
    file.getFile().delete();
    setSessionAttr(GlobalKey.FileIsLoaded, true);
   } catch (Exception e) {
    if(zipInputStream!=null)
    {
     try {
      zipInputStream.close();
     } catch (IOException e1) {
     }
    }
    if(in!=null)
    {
     try {
      in.close();
     } catch (IOException e1) {
     }
    }
    if(file!=null){
     file.getFile().delete();
    }
    setSessionAttr(GlobalKey.FileIsLoaded, false);
   }
  }

 

文件保存地址的配置

JfinalCfg.java类里面

public void configConstant(Constants me) {
		// TODO Auto-generated method stub
		// 载入少量必要配置，随后可用getProperty(...)获取值
		loadPropertyFile("config.properties");
		// 设置配置文件的开发模式
		me.setDevMode(getPropertyToBoolean("devMode", false));
		// 设置页面开发类型
		me.setViewType(ViewType.JSP);
		// 默认view的位置
		me.setBaseViewPath("/View");
		// 地址栏參数模式
		me.setUrlParaSeparator("-");
		//文件上传的存放地址,在webRoot下的WEB-INF/classes/diagrams目录
		me.setUploadedFileSaveDirectory(PathKit.getWebRootPath()+"/WEB-INF/classes/diagrams");
	}

最后上传成功之后的文件