`
f002489
  • 浏览: 271700 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Ajax实现文件上传___怎么设置multipart/form-data

阅读更多

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方式同时上传文件以及数据包含客户端上传例子

    综上所述,WebAPIFileUploadDemo项目为理解并实现基于`multipart/form-data`的文件和数据上传提供了一个基础模板。它展示了从客户端构建请求到服务器端解析和处理数据的完整流程,帮助开发者在实际项目中实现类似...

    浅析application/x-www-form-urlencoded和multipart/form-data的区别

    当使用`multipart/form-data`时,浏览器会为每个表单字段创建一个单独的部分,包括文件上传字段。每个部分都会有一个唯一的分隔符(boundary),用于在请求体中划分不同的部分。这样,即使包含二进制文件,也能安全...

    关于applicationx-www-form-urlencoded等字符编码的解释说明

    如果需要上传文件或处理复杂的数据结构,就需要使用multipart/form-data编码格式,而不是application/x-www-form-urlencoded。 application/x-www-form-urlencoded是HTML表单提交时使用的最常见的编码格式,它广泛...

    基于form-data请求格式详解

    本文主要探讨了一种特殊的POST请求格式——multipart/form-data,它在处理复杂数据,尤其是涉及文件上传的场景下,具有显著优势。本文将深入解析multipart/form-data的工作原理及其在实际应用中的使用。 multipart/...

    ajax-form:#ajax-forms这是一个js事件监听器,可让您以最简单的方式使用ajax提交任何表单。只需将类'.ajax_form'添加到您的表单中,瞧,您的表单将开始明智地提交ajax。 它也能够提交您的文件。 只需将常规enctype =“ multipartform-data”包含在表单元素中

    阿贾克斯形式这是一个js事件监听器,可让您以最简单的方式使用ajax提交任何表单。 只需将类“ .ajax_form”添加到您的表单中,瞧,您的表单将开始... 只需将常规enctype =“ multipart / form-data”包含在表单元素中

    ajax实现文件上传源码

    **Ajax 实现文件上传技术详解** 在Web开发中,用户经常需要进行文件上传操作,而传统的文件上传方式通常会刷新整个页面,导致用户体验不佳。随着Ajax(Asynchronous JavaScript and XML)技术的发展,我们可以实现...

    ajax实现文件上传

    ### AJAX 实现文件上传 在探讨 AJAX 如何实现文件上传之前,我们首先简要回顾一下 AJAX 的历史背景及其带来的变革。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分...

    JQuery实现ajax上传文件示例源码

    注意`enctype`属性设置为`multipart/form-data`,这是上传文件时必须的。 三、jQuery事件绑定 接下来,我们需要监听用户点击“上传”按钮的事件,触发Ajax文件上传。使用`$(document).ready()`确保页面加载完成后...

    上传文件AJAX

    5. **设置请求头**:对于文件上传,通常需要设置`Content-Type`为`multipart/form-data`,确保服务器能够正确解析数据。 6. **发送请求**:调用XMLHttpRequest对象的`send()`方法,将FormData对象作为参数发送。 7...

    ajax异步文件上传,servlet处理

    为了提供更好的用户体验,开发者通常会采用AJAX(Asynchronous JavaScript and XML)技术实现异步文件上传,避免传统方式下页面刷新带来的中断感。AJAX允许在后台与服务器进行通信,而无需刷新整个页面。本篇文章将...

    spring mvc ajax异步文件的上传和普通文件上传

    在Spring MVC框架中,文件上传是一项常见的功能,无论是普通的文件上传还是通过Ajax实现的异步文件上传,都为用户提供了更好的交互体验。本篇将详细讲解这两种方式的实现原理及步骤。 首先,让我们来理解一下普通...

    HTML如何实现以form表单方式上传文件而不刷新页面.zip

    当我们需要上传文件时,`&lt;form&gt;`标签的`enctype`属性必须设置为`multipart/form-data`。这是因为文件数据是二进制格式,不能直接用URL编码,`multipart/form-data`可以将文件数据分割并附带边界,以便服务器正确...

    javaWeb上传代码(普通上传和ajax后台上传)

    首先,Apache Commons FileUpload是Java中一个强大的文件上传处理库,它扩展了Servlet API的功能,使得我们可以方便地处理multipart/form-data类型的HTTP请求,这种类型的数据常用于文件上传。下面我们将分别介绍这...

    ajax跨域上传文件.zip

    `multipart/form-data`是用于上传文件的标准内容类型,`withCredentials`设为`true`表示发送跨域请求时携带cookie。 4. **处理跨域** 服务器端需要设置合适的CORS响应头,如: ```http Access-Control-Allow-...

    Ajax实现文件上传进度条

    Ajax技术的出现为解决这一问题提供了可能,它允许我们在不刷新整个页面的情况下进行异步通信,从而实现文件上传进度条的功能。下面将详细讲解如何利用Ajax实现文件上传进度条。 首先,我们需要理解Ajax的基本原理。...

    ajaxupload在spring mvc4.2中实现简单文件上传

    在Spring MVC 4.2框架中实现AjaxUpload(异步文件上传)是一个常见的需求,它允许用户在不刷新整个页面的情况下进行文件上传,提供更好的用户体验。以下是对这一主题的详细阐述: 1. **AjaxUpload简介**: Ajax...

    ajax异步上传文件

    这里,`enctype="multipart/form-data"`是关键,因为它告诉浏览器表单数据包含二进制文件。 接下来,我们使用JavaScript(通常配合jQuery库)编写AJAX请求。由于文件上传涉及二进制数据,传统的XMLHttpRequest对象...

    C#实现AJAX 上传文件,图片,音乐,

    本教程将重点讨论如何在C#环境下,通过AJAX技术实现文件,包括图片和音乐的上传功能。 首先,理解AJAX上传的基本原理。传统的文件上传通常涉及整个页面的刷新,而AJAX允许我们仅更新部分网页内容,提高用户体验。...

    SpringBoot前端网页上传文件案例

    传统的文件上传通常通过HTML的`&lt;form&gt;`元素配合`enctype="multipart/form-data"`属性来实现。在Spring Boot后端,我们需要使用`@RequestParam("file") MultipartFile file`注解来接收上传的文件。Spring Boot提供了`...

    jquery实现ajax上传文件asp.net版

    在ASP.NET环境中,使用jQuery和Ajax来实现文件上传是一种常见的技术方案,它可以提供无刷新的用户体验,提升网站的交互性。下面将详细讲解这个过程涉及的关键知识点。 首先,我们需要了解jQuery库。jQuery是一个轻...

Global site tag (gtag.js) - Google Analytics