Ajax上传文件

Posted gavanwanggw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax上传文件相关的知识,希望对你有一定的参考价值。

先上效果图

 

技术分享技术分享

 

 

基于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");
	}


最后上传成功之后的文件

技术分享

 

 







以上是关于Ajax上传文件的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax实现上传文件代码,带进度条

无法使用 $ajax() 在 PHP 中上传文件

AJAX上传文件和文本不起作用

jQuery / ajax 上传图片并保存到文件夹

ajax上传文件后,后台java如何接收(求后台接收的完整代码)

文件未在 cakephp 中使用 Ajax 上传