在开发的时候我们可能都需要传一些文件到后台,然后又不希望刷新页面,那么我们可用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" />
相关推荐
在IT领域,尤其是在Web开发中,"AJAX,多文件上传"是一个常见且重要的功能,它使得用户可以在不刷新整个页面的情况下实现文件的批量上传,极大地提升了用户体验。本项目是模仿旧版163网盘的多文件上传功能,利用AJAX...
当用户在页面上执行某些操作时,如点击按钮,JavaScript会创建一个XMLHttpRequest实例,通过它向服务器发送请求。服务器处理请求后,将结果返回给XMLHttpRequest对象,然后JavaScript可以接收到这个结果并更新页面的...
3. 服务器端处理:在C#后台,接收每个文件块并存储在一个临时目录,同时记录每个块的信息(如顺序、大小等)。 4. 汇总文件:当所有块上传完成后,按照预先记录的顺序和大小合并为原始文件。 5. 错误处理:检测...
5. **服务器端接口**:后端需要提供一个接收文件的接口,这个接口需要能接收并处理来自前端的文件数据,将其存储到COS中。在这里,我们看到`upload.jsp`可能就是这样一个接口。 6. **配置文件**:`web.xml`是一个...
【压缩包子文件的文件名称】"多集影片的后台添加.htm"表明这是一个HTML文件,可能是实现该功能的示例代码或者教学步骤的网页文档。HTML是网页的基础结构,结合JavaScript可以创建动态、交互式的网页应用。 在这个...
总的来说,ZTree与Java后台的数据交互是一个完整的前端-后端协作过程,涉及到JSON数据格式、HTTP请求、事件处理等多个环节。理解并熟练掌握这些知识,能帮助我们更好地利用ZTree实现高效、安全的管理系统。在实际...
这篇文章主要介绍了使用JavaScript(简称JS)的Ajax技术将数据传送到服务器后台,并对后台返回的字符串进行处理的方法。本文将详细阐述相关知识点,包括Ajax技术、HTTP请求方法、JSON数据格式处理,以及如何在后台...
2.3.js 一个单独的JS测试文件 2.4.htm 完成层的换肤功能 2.5.htm 用于调试JS程序的测试代码 第3章(/C03/) 3.1.htm 判断浏览器类型的例子 3.2.htm 演示undefinded如何与null...
下面是一个简单的AJAX示例,展示了如何使用`XMLHttpRequest`对象发送请求并处理响应: ```javascript function Ustbwuyi() { var data = document.getElementById("username").value; CreateXmlHttp(); if (!...
通常,大文件会被分割成多个小部分,然后逐个上传,这样可以避免一次性加载整个文件到内存中,降低了服务器压力,并且允许在上传过程中进行中断和恢复。控件通过异步处理这些分块,使得用户可以在上传过程中看到实时...
在IT行业中,"jsp无刷新上传文件"是一个常见的需求,特别是在构建交互性强、用户体验良好的Web应用时。这个技术主要依赖于Ajax(异步JavaScript和XML)和jQuery等库来实现,使得用户在上传文件时无需等待页面刷新,...
在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储;此过程较为...
在IT行业中,Web开发是一项关键任务,而"editImage-master.rar"这个压缩包文件似乎包含了一个用于网页截图的JavaScript解决方案。这个项目利用了HTML5的Canvas元素,它是一种在浏览器中绘制图形的强大工具,同时也...
这通常涉及到在后台数据库中进行分块查询,然后只将一部分数据传送到前端显示,用户可以逐页浏览,减轻了服务器压力,同时也优化了页面加载速度。 4. **Handler**:ASP.NET的HTTP处理器(.ashx文件)可能被用作处理...
在探讨如何利用JavaScript实现前后台(后端与前端)之间传输JSON数据时,首先需要明确JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集。JSON易于人阅读和编写,同时也...
在Web开发中,前后台数据交换是一个常见且重要的环节。*** 作为服务器端技术,结合 jQuery 这一客户端库,可以实现灵活的数据交互。本文详细阐述了如何使用 jQuery 将 *** 后台数据传送到前台,并在 JavaScript 中...
创建一个AJAX请求的基本步骤包括: 1. 创建XMLHttpRequest对象:这是AJAX的核心,它提供了与服务器通信的能力。 2. 配置请求:设置请求方法(GET或POST)、URL(指向PHP脚本的路径)、以及是否异步执行。 3. 发送...
比如在一个表单中,用户输入了姓名、全款金额和折扣信息,我们需要将这些数据收集起来并最终传送给后台。前台的JavaScript函数`generateDtb`负责生成数据。这个函数首先获取用户输入的姓名,然后创建一个数组来存储...
在实际应用中,我们经常需要与后端进行数据交互,例如,用户在前端选择了某些节点后,需要将这些选中的节点信息传送到后台进行处理。本文将详细讲解如何在后台获取ZTREE选中或被勾选的节点。 首先,要理解ZTREE的...