`
xfyzhy
  • 浏览: 15898 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

使用AJAX上传文件及表单数据

 
阅读更多

如果想要通过ajax异步请求上传文件及数据,需要下载ajaxfileuplad.js,见附件。

function importNewTemplate() {
	var arrId = [];
        arrId[0] = "uploadfile";
        var data = getFormJson("form");
		var filePath = document.getElementById("uploadfile").value; 
			 $.ajaxFileUpload({
	    	url:APP_PATH+"/yn/user/importNew.do?",
	    	async: false,
	    	type:'post',
	    	dataType:'json',
	    	data:data,
	    	fileElementId:arrId,
	    	success:function(datas){
	    	    if(datas.status==0){//成功后跳转到新的页面
	    	    	var rightTemplatePath = datas.data.rightTemplatePath;
	    	    	var optUserName = datas.data.optUserName;
	    	    	var submitUrl = APP_PATH+"/yn/user/submitTmp.do?rightTemplatePath=" +rightTemplatePath + "&order.optUser.name=" + optUserName;
	    	    	window.location.href = submitUrl;
	    	    }else{
	    	    	var result = confirm('导入失败是否下载错误模板'); 
	    	    	var downloadPath = datas.data.downloadPath;
	    	    	if(result){
		    	    	var href = APP_PATH + downloadPath;
						window.open(href, "_blank");
	    	    	}

	    	    }
	    	} 
        });}
public String importNew() throws Exception {
		String rtUserUuid = this.getRTUser().getUuid();
		IUserAuthzService userService = (IUserAuthzService) com.ultrapower.iam.core.BeanFactory.getBean(com.ultrapower.iam.server.common.BeanIDConstants.USER_AUTHZ_FLOW);
		String realPath = System.getProperty("flowrealPath");
		long time = System.currentTimeMillis();
		realPath = realPath+"/download/user_template_new"+time+".xls";
		String downloadPath = "/download/user_template_new"+time+".xls";
		this.errorTemplatePath=downloadPath;
		
		File file = this.addAttachment();
		ExcelOperation oo = new ExcelOperation();
		oo.setFile(file);
		oo.setType("0");
		oo.setPath(realPath);
		oo.setUserUUID(rtUserUuid);
		ExcelOperation excelOperation = userService.initExcelObj(oo);
		JsonResp jsonResp = JsonResp.asEmpty();
		if(excelOperation.isFlag()){
			this.getResponse().setContentType("text/html;charset=UTF-8");
			jsonResp.add("rightTemplatePath", this.rightTemplatePath);
			jsonResp.add("optUserName", this.getOrder().getOptUser().getName());
			this.getResponse().getWriter().write(jsonResp.success().toJson());
			return null;
		}else{
			//如果失败 返回错误模范下载路径
			this.getResponse().setContentType("text/html;charset=UTF-8");
			jsonResp.add("downloadPath", downloadPath);
			this.getResponse().getWriter().write(jsonResp.error("").toJson());
			return null;
		}
	
	}
<td  class="button_bar" colspan="2">
<input type="button" 
   id="importNewTem" 
   value="导入" 
   class="button_save"
   onmouseover="this.className='button_save_hover'" 
   onmouseout="this.className='button_save'" 
   onclick="importNewTemplate();"/>
</td>

  

	<tr>
	  <td colspan="4" style="padding:3px 0;">
			<span class="requiredFlg" >*</span> 
			<span class="detailCurrent2" >选择导入模板:</span>
			<input type="file" id="uploadfile" name="uploadfile" size="50" value="" style="width:300px;" dataType="Require" labelText="导入模板">	
	</td>
										
</tr>	

 

分享到:
评论

相关推荐

    Ajax上传文件(无需表单)实测可用

    ajax上传项目,不需要表单和设置表单二级制数据传输,直接选择文件就异步上传了,绝对靠谱,也可融合与自己的项目里面去,简单易操作,看了基本都明白。

    jQuery实现文件编码成base64并通过AJAX上传的方法

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...

    struts2 ajax上传图片以及提交form表单的值

    使用struts2 框架 中的文件上传,然后使用ajax上传图片以及form表单的数据

    jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    表单初始化FormData对象方式上传文件 •前端(JQuery): &lt;form enctype="multipart/form-data"&gt; &lt;input type="file" name="myfile" onchange="loadFile&#40;this.files[0]&#41;"&gt; &lt;/form&gt; ...

    ajax异步批量上传文件demo

    这个是使用JavaScript中FormData格式化表单数据使之成为key/value,使用ajax异步上传数据的demo。 包含html和服务端解析数据并保存文件

    thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

    本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。... formdata 获取表单数据 包括文件上传  HTML &lt;form class="am-form" id="recruitinfo"&gt; &lt;d

    ajax使用formdata上传文件流

    今天在做项目的时候涉及到了ajax上传文件流的问题,由于是移动端两个页面的两个表单使用同一个ajax地址进行上传数据给后台,数据中涉及到了不同类型的input,其中存在了file类型的input,导致无法使用表单序列化直接...

    基于HTML5 Ajax文件上传进度条如何实现(jquery版本)

    FormData 对象可以使用append 方法进行 key – value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件。 1、FormDate对象的创建 var formData = new FormData(); 2、向 FormDate 对象添加数据 ...

    Ajax方式提交带文件上传的表单及隐藏iframe应用

    一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦,基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,感兴趣的你不妨了解一下,或许本文对你有所帮助

    使用Ajax进行文件与其他参数的上传功能(java开发)

    找了很多资料,在网上看到的大部分是form表单的方式提交文件,对于Ajax方式提交文件并且也要提交表单中其他数据,发现提及的并不是很多,后来在同事的帮助下,使用ajaxfileupload最终完成了文件上传与其他提交的操作...

    有关文件上传 非ajax提交 得到后台数据问题

    根据id获得表单数据然后发送ajax请求,获得后台返回数据,处理数据,完美。 但是如果需要上传文件,  请选择文件:  &lt;td&gt;&lt;input type= class=easyui-filebox id=fileImport name=file value=

    jQuery ajax中使用serialize()方法提交表单数据示例

    jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2…)后提交。serialize() 方法使用标准的 ...

    ajax_struts2_上传与下载_无刷新

    2. 采用jquery.form.js实现ajaxForm提交表单或上传文件到服务器。 3. 在struts2的Action通过2种不同的实现方法返回json格式的字符串。 4. 针对商品实现简单无刷新上传与下载 4. 批量导入数据采用的是导入test文件夹...

    使用 jQuery.ajax 上传带文件的表单遇到的问题

    使用 jQuery 上传带文件的表单时,会有些问题。 首先,因为使用的是 FormData,所以必须在传入 $.ajax 的参数中配置 processData: false。 否则将会抛出 Illegal invocation 的异常,因为 jQuery 默认是会对传入的 ...

    借助FileReader实现将文件编码为Base64后通过AJAX上传

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...

    vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件。 其实已经有朋友...

    django-file-form:Django-file-form可帮助您编写带有漂亮ajax上传的表单

    Django档案格式Django-file-form可帮助您编写带有漂亮ajax上传的表单。 阅读的文档特征: 您可以轻松地将ajax文件上传添加到表单。 Ajax上传与html上传相同。 这意味着您无需更改代码即可支持ajax上传。 支持单文件...

    springMVC结合AjaxForm上传文件

    最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用。 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-...

Global site tag (gtag.js) - Google Analytics