`
huyifan951124
  • 浏览: 82878 次
社区版块
存档分类
最新评论

如何在一次ajax内传送一个或多个文件到后台

阅读更多

在开发的时候我们可能都需要传一些文件到后台,然后又不希望刷新页面,那么我们可用ajax传文件流到后台。

我们可以在js中用FormData这个对象来包装文件流对象。

1.首先我们怎么能够让file能够选择多个文件呢,很简单加个multiple属性就行,这样就可以再选文件的时候选择多个文件了。

 

<input type="file" id="images" name="images" multiple />

 2.接着,我们要在js中获得这个文件对象

 

 

$("#submit").click(function() {

	var paths = document.getElementById("images").files;
			
			
			
	if(paths.length==0)
	{
		alert("请选择文件");
		return;
	}
			
	var formData = new FormData();
	//alert(paths.length);
        //我们遍历每一个文件对象
	for (var i = 0; i < paths.length; i++) {
		var file = paths[i];
		//alert(file.type);
               //用正则表达式判断文件的类型是否是图片,这里大家可以自由发挥
		if (!new RegExp("image/*").test(file.type)) {
			alert("请注意,上传的文件一定要是图片文件");
					return;
		} 
	}
	//alert("开始上传");
       //我们可以预先定义一个FormData对象
	var formData=new FormData();
			
	for(var i=0;i<paths.length;i++)
	{
                //将每个文件设置一个string类型的名字,放入到formData中,这里类似于setAttribute("",Object)
		formData.append(paths[i].name,paths[i]);
	}
			
			
	$.ajax({
				
		 url: '/MySoleSys/mainServlet',
	         type: 'POST',
		 cache: false,
	         data:formData,
                 //这个参数是jquery特有的,不进行序列化,因为我们不是json格式的字符串,而是要传文件
		 processData: false,
               //注意这里一定要设置contentType:false,不然会默认为传的是字符串,这样文件就传不过去了
		 contentType: false,
		 success:function(returnedData)
		 { 
		       if($.trim(returnedData)==$.trim("success"))
		       {
			        alert("上传图片成功");
				window.location.href="/MySoleSys/mainboard/index.html"
			}
			else if($.trim(returnedData)==$.trim("fail"))
				alert("上传图片失败");				    		
		}
	});

});

 3.下一步我们肯定要在后台接收文件啦,这里我已开始用action接受,但总是收不到文件,也许是struts2过滤器的问题,改成用Servlet接受就成了。。。郁闷。。,后台我们用request.getParts()接受FormData.

 

 

Collection<Part>parts=request.getParts();
Iterator<Part> it=parts.iterator();
while(it.hasNext())
{
	Part img=it.next();			
	/**
	 * 开始传图片到服务器端文件夹。
	 */
	file=new File(path+"\\"+img.getName());
	fos=new FileOutputStream(file);		
        //可以从每个part中获得文件的输入流,获得输入流之后想怎么搞就怎么搞都可以啦
	imgis=img.getInputStream();
				
	int len=-1;
	while((len=imgis.read(bytes))!=-1)
	{
		fos.write(bytes,0, len);
	}
	fos.flush();
				
}

 

 还有一点就是如果报一次请求的数据量太大了的话,可以在struts.xml配置struts.multipart.maxSize属性,把他的值改大一点就可以了。

 

<constant name="struts.multipart.maxSize" value="9000000" />

 

  

1
2
分享到:
评论

相关推荐

    AJAX,多文件上传

    在IT领域,尤其是在Web开发中,"AJAX,多文件上传"是一个常见且重要的功能,它使得用户可以在不刷新整个页面的情况下实现文件的批量上传,极大地提升了用户体验。本项目是模仿旧版163网盘的多文件上传功能,利用AJAX...

    Ajax技术及其在STRUTS应用中的实现

    当用户在页面上执行某些操作时,如点击按钮,JavaScript会创建一个XMLHttpRequest实例,通过它向服务器发送请求。服务器处理请求后,将结果返回给XMLHttpRequest对象,然后JavaScript可以接收到这个结果并更新页面的...

    WEBUPLOAD大文件传送C# asp.net

    3. 服务器端处理:在C#后台,接收每个文件块并存储在一个临时目录,同时记录每个块的信息(如顺序、大小等)。 4. 汇总文件:当所有块上传完成后,按照预先记录的顺序和大小合并为原始文件。 5. 错误处理:检测...

    cos+ajax

    5. **服务器端接口**:后端需要提供一个接收文件的接口,这个接口需要能接收并处理来自前端的文件数据,将其存储到COS中。在这里,我们看到`upload.jsp`可能就是这样一个接口。 6. **配置文件**:`web.xml`是一个...

    javascript经典特效---多集影片的后台添加.rar

    【压缩包子文件的文件名称】"多集影片的后台添加.htm"表明这是一个HTML文件,可能是实现该功能的示例代码或者教学步骤的网页文档。HTML是网页的基础结构,结合JavaScript可以创建动态、交互式的网页应用。 在这个...

    ztree插件前台和后台数据交互

    总的来说,ZTree与Java后台的数据交互是一个完整的前端-后端协作过程,涉及到JSON数据格式、HTTP请求、事件处理等多个环节。理解并熟练掌握这些知识,能帮助我们更好地利用ZTree实现高效、安全的管理系统。在实际...

    js使用ajax传值给后台,后台返回字符串处理方法

    这篇文章主要介绍了使用JavaScript(简称JS)的Ajax技术将数据传送到服务器后台,并对后台返回的字符串进行处理的方法。本文将详细阐述相关知识点,包括Ajax技术、HTTP请求方法、JSON数据格式处理,以及如何在后台...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    2.3.js 一个单独的JS测试文件 2.4.htm 完成层的换肤功能 2.5.htm 用于调试JS程序的测试代码 第3章(/C03/) 3.1.htm 判断浏览器类型的例子 3.2.htm 演示undefinded如何与null...

    ajax原理,xmlHttpRequest

    下面是一个简单的AJAX示例,展示了如何使用`XMLHttpRequest`对象发送请求并处理响应: ```javascript function Ustbwuyi() { var data = document.getElementById("username").value; CreateXmlHttp(); if (!...

    C#2.0大文件上传控件

    通常,大文件会被分割成多个小部分,然后逐个上传,这样可以避免一次性加载整个文件到内存中,降低了服务器压力,并且允许在上传过程中进行中断和恢复。控件通过异步处理这些分块,使得用户可以在上传过程中看到实时...

    jsp无刷新上传文件

    在IT行业中,"jsp无刷新上传文件"是一个常见的需求,特别是在构建交互性强、用户体验良好的Web应用时。这个技术主要依赖于Ajax(异步JavaScript和XML)和jQuery等库来实现,使得用户在上传文件时无需等待页面刷新,...

    Vue 使用formData方式向后台发送数据的实现

    在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储;此过程较为...

    editImage-master.rar

    在IT行业中,Web开发是一项关键任务,而"editImage-master.rar"这个压缩包文件似乎包含了一个用于网页截图的JavaScript解决方案。这个项目利用了HTML5的Canvas元素,它是一种在浏览器中绘制图形的强大工具,同时也...

    在线音乐商店综合项目.zip

    这通常涉及到在后台数据库中进行分块查询,然后只将一部分数据传送到前端显示,用户可以逐页浏览,减轻了服务器压力,同时也优化了页面加载速度。 4. **Handler**:ASP.NET的HTTP处理器(.ashx文件)可能被用作处理...

    利用js实现前后台传送Json的示例代码

    在探讨如何利用JavaScript实现前后台(后端与前端)之间传输JSON数据时,首先需要明确JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集。JSON易于人阅读和编写,同时也...

    Jquery+asp.net后台数据传到前台js进行解析的方法

    在Web开发中,前后台数据交换是一个常见且重要的环节。*** 作为服务器端技术,结合 jQuery 这一客户端库,可以实现灵活的数据交互。本文详细阐述了如何使用 jQuery 将 *** 后台数据传送到前台,并在 JavaScript 中...

    JS从PHP获取数据显示在网页

    创建一个AJAX请求的基本步骤包括: 1. 创建XMLHttpRequest对象:这是AJAX的核心,它提供了与服务器通信的能力。 2. 配置请求:设置请求方法(GET或POST)、URL(指向PHP脚本的路径)、以及是否异步执行。 3. 发送...

    如何使用json在前后台进行数据传输实例介绍

    比如在一个表单中,用户输入了姓名、全款金额和折扣信息,我们需要将这些数据收集起来并最终传送给后台。前台的JavaScript函数`generateDtb`负责生成数据。这个函数首先获取用户输入的姓名,然后创建一个数组来存储...

    后台获取ZTREE选中节点的方法

    在实际应用中,我们经常需要与后端进行数据交互,例如,用户在前端选择了某些节点后,需要将这些选中的节点信息传送到后台进行处理。本文将详细讲解如何在后台获取ZTREE选中或被勾选的节点。 首先,要理解ZTREE的...

Global site tag (gtag.js) - Google Analytics