H5 通过Ajax方式上传文件,使用FormData进行Ajax请求
- <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
- <h1 >测试通过Rest接口上传文件 </h1>
- <p >指定文件名: <input type ="text" name="filename" /></p>
- <p >上传文件: <input type ="file" name="file" /></p>
- <p >关键字1: <input type ="text" name="keyword" /></p>
- <p >关键字2: <input type ="text" name="keyword" /></p>
- <p >关键字3: <input type ="text" name="keyword" /></p>
- <input type ="submit" value="上传"/>
- </form>
- $.ajax({
- url : "http://localhost:8080/STS/rest/user",
- type : "POST",
- data : $( '#postForm').serialize(),
- success : function(data) {
- $( '#serverResponse').html(data);
- },
- error : function(data) {
- $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
- }
- });
关于FormData及其用法
XMLHttpRequest Level 2添加了一个新的接口
FormData .利用FormData对象 ,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send() 方法来异步的提交这个"表单".比起普通的ajax,使用FormData 的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
参见:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData |
- var oData = new FormData(document.forms.namedItem("fileinfo" ));
- oData.append( "CustomField", "This is some extra data" );
- var oReq = new XMLHttpRequest();
- oReq.open( "POST", "stash.php" , true );
- oReq.onload = function(oEvent) {
- if (oReq.status == 200) {
- oOutput.innerHTML = "Uploaded!" ;
- } else {
- oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
- }
- };
- oReq.send(oData);
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
- <form id= "uploadForm">
- <p >指定文件名: <input type="text" name="filename" value= ""/></p >
- <p >上传文件: <input type="file" name="file"/></ p>
- <input type="button" value="上传" onclick="doUpload()" />
- </form>
- function doUpload() {
- var formData = new FormData($( "#uploadForm" )[0]);
- $.ajax({
- url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
- type: 'POST',
- data: formData,
- async: false,
- cache: false,
- contentType: false,
- processData: false,
- success: function (returndata) {
- alert(returndata);
- },
- error: function (returndata) {
- alert(returndata);
- }
- });
- }
H5 通过Ajax方式上传文件,使用FormData进行Ajax请求相关推荐
- jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- ashx获取input file 文件_通过Ajax方式上传文件(input file),使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
- php ajax xmlhttpreq 上传文件 get,使用jQuery Ajax异步上传文件方法总结
一 使用FormData对象上传文件 FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".但上传文件部分只有底 ...
- Ajax方式上传文件报错Uncaught TypeError: Illegal invocation
今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...
- 通过$.Ajax()方式上传文件,使用FormData进行Ajax请求,应注意
首先, 在 http 中传输文件的问题.起初,http 协议中没有上传文件方面的功能,直到 rfc1867 为 http 协议添加了这个功能.当然在 rfc1867 中限定 form 的 method ...
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
<script type="text/jscript">$(function () {$("#btn_uploadimg").click(funct ...
- ajax实现上传文件的进度,基于Ajax技术实现文件上传带进度条
1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
- 使用插件ajaxfileupload通过ajax方式上传文件,在火狐下出错
====================================================== 注:本文源代码点此下载 ================================= ...
- ajax异步上传什么意思,使用 jQuery 的 AJAX 异步上传文件
现在基本上很多网页里面都在使用 jQuery,要实现文件的异步上传,大多数的解决方法都是使用 jQuery 插件,如果你只是上传一张图片,使用插件反而觉得多余了,其实 jQuery 的 ajax() ...
最新文章
- 【OpenCV 4开发详解】高斯滤波
- Hbase写入量大导致region过大无法split问题
- 【GDAL】聊聊GDAL的数据模型(二)——Band对象
- Openlayers中设置定时绘制和清理直线图层
- php 数组对比 unset,如何区分PHP中unset,array_splice的区别
- win8、win10如何修改文件夹的权限
- Java案例:词频统计
- Node.js 非阻塞的 Sleep 要怎么写 ?
- 台式机装苹果系统_苹果电脑macbook装windows系统U盘启动的详细方法
- 解读:大数据分析及其数据来源
- 解决:return _compile(pattern, flags).search(string) TypeError: expected string or buffer
- Java分别使用zxing及qrcode-plugin生成各种样式二维码
- MYSQL 修改语句(数据)
- Java模拟项目开发(快递柜)
- Scala之set方法(超详细)
- 华硕vm510l最大支持多大内存_华硕vm510l与w519l区别
- 目标码格式解析之DSP目标码Cinit段
- 非洲勒索软件、僵尸网络攻击有所增加——但在线诈骗仍构成最大威胁
- 手机录音 怎么单声道_手机音量已经调到很大,听起来还是很小怎么办?原来问题出在这里...
- Linux 之父亮相,OpenCloudOS 社区开放日来了