http://tech.techweb.com.cn/thread-231571-1-1.html
------------------------------------------------------------------------------------------------------------------------------
先创建一个Iframe,然后form的target指向它。
HTML code
<form action="upload.jsp" enctype="multipart/form-data" method="post" target="ifm" >
</form>
<iframe id='ifm' name='ifm' style="display:none"/>
------------------------------------------------------------------------------------------------------------------------------
学习一下,以前只要用到上传图片一般都是用的Iframe来实现那种"无刷新",ajax还没有试过呢,当时想过,但一想到ajax传参数只能通过URL传就头疼,担心URL传递的参数有限,表单里的值还要通过组合成URL传,.......
------------------------------------------------------------------------------------------------------------------------------
表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application
/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form- data,才能完整的传递文件数据,进行
下面的操作.
enctype=\"multipart/form-data\"是上传二进制数据; form里面的input的值以2进制的方式传过去。
------------------------------------------------------------------------------------------------------------------------------
httpxmlrequest无法上传文件的。
------------------------------------------------------------------------------------------------------------------------------
关于ajax 上传图片 enctype="multipart/form-data"的问题
http://blog.csdn.net/hytfly/archive/2011/03/22/6267229.aspx
首先解释下form的enctype属性的问题:
该属性为提交表单浏览器对数据的编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。
当
action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&
amp;name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url。
当action为post时候,浏览器把form数据封装到http body中,然后发送到server。
如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。
但
是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上
Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件
name)等信息,并加上分割符(boundary)。
如果有以下form,并选择了file1.txt上传
<form action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<input type="text" name="submit-name" value="chmod777"><br />
What files are you sending? <input type="file" name="files"><br />
</form>
则有如下body:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
chmod777
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--AaB03x--
那么如何解决图片问题呢?(ajax的httpxmlrequest无法上传文件的)
先创建一个Iframe,然后form的target指向它。 |
<form action="upload.jsp" enctype="multipart/form-data" method="post" target="ifm" >
</form>
<iframe id='ifm' name='ifm' style="display:none"/>
后台处理完后可以输出:
<script
type="text/javascript">alert("'+message+'")</script>;
这样便可完成判断上传是否成功的功能。
-----------------------------------------------------------------------------------------------others-------------------------------
整个iframe定时局部刷新 js定时器
分享到:
相关推荐
综上所述,WebAPIFileUploadDemo项目为理解并实现基于`multipart/form-data`的文件和数据上传提供了一个基础模板。它展示了从客户端构建请求到服务器端解析和处理数据的完整流程,帮助开发者在实际项目中实现类似...
当使用`multipart/form-data`时,浏览器会为每个表单字段创建一个单独的部分,包括文件上传字段。每个部分都会有一个唯一的分隔符(boundary),用于在请求体中划分不同的部分。这样,即使包含二进制文件,也能安全...
如果需要上传文件或处理复杂的数据结构,就需要使用multipart/form-data编码格式,而不是application/x-www-form-urlencoded。 application/x-www-form-urlencoded是HTML表单提交时使用的最常见的编码格式,它广泛...
本文主要探讨了一种特殊的POST请求格式——multipart/form-data,它在处理复杂数据,尤其是涉及文件上传的场景下,具有显著优势。本文将深入解析multipart/form-data的工作原理及其在实际应用中的使用。 multipart/...
阿贾克斯形式这是一个js事件监听器,可让您以最简单的方式使用ajax提交任何表单。 只需将类“ .ajax_form”添加到您的表单中,瞧,您的表单将开始... 只需将常规enctype =“ multipart / form-data”包含在表单元素中
**Ajax 实现文件上传技术详解** 在Web开发中,用户经常需要进行文件上传操作,而传统的文件上传方式通常会刷新整个页面,导致用户体验不佳。随着Ajax(Asynchronous JavaScript and XML)技术的发展,我们可以实现...
### AJAX 实现文件上传 在探讨 AJAX 如何实现文件上传之前,我们首先简要回顾一下 AJAX 的历史背景及其带来的变革。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分...
注意`enctype`属性设置为`multipart/form-data`,这是上传文件时必须的。 三、jQuery事件绑定 接下来,我们需要监听用户点击“上传”按钮的事件,触发Ajax文件上传。使用`$(document).ready()`确保页面加载完成后...
5. **设置请求头**:对于文件上传,通常需要设置`Content-Type`为`multipart/form-data`,确保服务器能够正确解析数据。 6. **发送请求**:调用XMLHttpRequest对象的`send()`方法,将FormData对象作为参数发送。 7...
为了提供更好的用户体验,开发者通常会采用AJAX(Asynchronous JavaScript and XML)技术实现异步文件上传,避免传统方式下页面刷新带来的中断感。AJAX允许在后台与服务器进行通信,而无需刷新整个页面。本篇文章将...
在Spring MVC框架中,文件上传是一项常见的功能,无论是普通的文件上传还是通过Ajax实现的异步文件上传,都为用户提供了更好的交互体验。本篇将详细讲解这两种方式的实现原理及步骤。 首先,让我们来理解一下普通...
当我们需要上传文件时,`<form>`标签的`enctype`属性必须设置为`multipart/form-data`。这是因为文件数据是二进制格式,不能直接用URL编码,`multipart/form-data`可以将文件数据分割并附带边界,以便服务器正确...
首先,Apache Commons FileUpload是Java中一个强大的文件上传处理库,它扩展了Servlet API的功能,使得我们可以方便地处理multipart/form-data类型的HTTP请求,这种类型的数据常用于文件上传。下面我们将分别介绍这...
`multipart/form-data`是用于上传文件的标准内容类型,`withCredentials`设为`true`表示发送跨域请求时携带cookie。 4. **处理跨域** 服务器端需要设置合适的CORS响应头,如: ```http Access-Control-Allow-...
Ajax技术的出现为解决这一问题提供了可能,它允许我们在不刷新整个页面的情况下进行异步通信,从而实现文件上传进度条的功能。下面将详细讲解如何利用Ajax实现文件上传进度条。 首先,我们需要理解Ajax的基本原理。...
在Spring MVC 4.2框架中实现AjaxUpload(异步文件上传)是一个常见的需求,它允许用户在不刷新整个页面的情况下进行文件上传,提供更好的用户体验。以下是对这一主题的详细阐述: 1. **AjaxUpload简介**: Ajax...
这里,`enctype="multipart/form-data"`是关键,因为它告诉浏览器表单数据包含二进制文件。 接下来,我们使用JavaScript(通常配合jQuery库)编写AJAX请求。由于文件上传涉及二进制数据,传统的XMLHttpRequest对象...
本教程将重点讨论如何在C#环境下,通过AJAX技术实现文件,包括图片和音乐的上传功能。 首先,理解AJAX上传的基本原理。传统的文件上传通常涉及整个页面的刷新,而AJAX允许我们仅更新部分网页内容,提高用户体验。...
传统的文件上传通常通过HTML的`<form>`元素配合`enctype="multipart/form-data"`属性来实现。在Spring Boot后端,我们需要使用`@RequestParam("file") MultipartFile file`注解来接收上传的文件。Spring Boot提供了`...
在ASP.NET环境中,使用jQuery和Ajax来实现文件上传是一种常见的技术方案,它可以提供无刷新的用户体验,提升网站的交互性。下面将详细讲解这个过程涉及的关键知识点。 首先,我们需要了解jQuery库。jQuery是一个轻...