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定时器
分享到:
相关推荐
我们知道在通过POST方式向服务器发送AJAX请求时最好要通过设置请求头来指定为application/x-www-form-urlencoded编码类型。知道通过表单上传文件时必须指定编码类型为"multipart/form-data"。那么为什么要这么设置呢
阿贾克斯形式这是一个js事件监听器,可让您以最简单的方式使用ajax提交任何表单。 只需将类“ .ajax_form”添加到您的表单中,瞧,您的表单将开始... 只需将常规enctype =“ multipart / form-data”包含在表单元素中
最近一直都比较忙,坚持月月更新博客的计划不得中止了,今天抽出点时间来说说最近项目中遇到的一个问题,有关request post请求格式中的multipart/form-data格式。 引言 最近在参与一个项目过程中遇到一个问题,相信...
原理: FileUpload实现上传功能, UploadListener 监听上传进度, DWR push (Reverse Ajax) 进度信息并更新页面, 实现无刷新多文件上传 运行环境: Tomcat 5/6 测试通过 说明:累计上传文件不超过10M(可以更改...
本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery jsp/html代码 使用JQury [removed][removed] 前端表单 <form id="form-avatar" enctype="multipart/form-data...
那么第一件事情设置请求头信息,,现在用的很多封装的ajax库都可以设置请求头信息 这里以axios为例 axios({ url:this.dialog.add.upload_url, method:'post', data, headers:{ 'Content-Type':'application/x-...
下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分,需要设计一个表单,form的属性添加 enctype=”multipart/form-data”,设计一个iframe,作为隐藏。form的target等于iframe的name; 在servlet部分:...
// headers:{"ClientCallMode" : "ajax"},//添加请求头部 enctype="multipart/form-data" success: function(data){ if(data.msg=="success"){ alert("保存成功"); }else{ alert("保存失败")...
下面看下ajax实现文件上传 没有使用插件 一、单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> [removed][removed] <title></title> </head&...
本文实例讲述了jsp+ajax实现无刷新上传...列表页把form表单提交到一个隐式的iframe里面,设置表单的属性 代码如下:enctype=’multipart/form-data’ target=’hidden_frame’ 然后,处理页处理后返回 代码如下:out.
form id=uploadform enctype=multipart/form-data name=uploadform method=post > <input id=fileToUpload type=file name=fileToUpload class=uploadinput > <input id=add_file type=button value=...
form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟...form id=uploadForm enctype=multipart/form-data> <div class=form-group id=file> <input type=hidden name=_csrf-applic
form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload" /> <input type="button" value="上传" onclick="upload()" /&...
ajax上传附件,防止form表单提交页面刷新,form表单要有encType="multipart/form-data
文件上传一般有下面2种方式: ...form enctype=multipart/form-data method=post action=upload.php> <input type=file name=id_pic[] accept=image/* class=form-control multiple /> <input ty
标签里加上enctype = ‘multipart/form-data’,这样是可以上传图片的; 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新; 这样我们可以先到异步的Ajax可以实现局部刷新; ...
跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp ...form action=/ method=post enctype=multipart/form-data> <in
本文实例为大家分享了php+ajax 文件上传的具体代码,供大家参考,具体内容如下 html 代码 <form action={pboot:form fcode=8} method=post id=t enctype=multipart/form-data> <input type=file name='...
注意在文件上载时,所使用的编码类型应当是“multipart/form-data”,它既可以发送文本数据,也支持二进制数据上载。 <%@ page language=java contentType=text/html; charset=utf-8 pageEncoding
通过传统的form表单提交的方式上传文件: Html代码 <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> 测试通过Rest...