ajax之---上传文件
“伪”ajax向后台提交文件
<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1">
<input type="text" name="k1" />
<input type="text" name="k2" />
<input type="file" name="k3" />
<a onclick="AjaxSubmit8()">提交</a>
</form>
<script>
function AjaxSubmit8() {
document.getElementById('iframe1').onload = reloadIframe1;
document.getElementById('fm1').submit();
}
function reloadIframe1() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
console.log(obj);
}
</script>
jquery ajax向后台提交文件
<input type="file" id="img" />
<a class="btn" onclick="AjaxSubmit6();">上传</a>
<script>
function AjaxSubmit6() {
//document.getElementById('img')[0]
var data = new FormData();
data.append('k1','v1');
data.append('k2','v2');
data.append('k3',document.getElementById('img').files[0]);
$.ajax({
url: '/ajax1.html',
type: 'POST',
data:data,
success:function (arg) {
console.log(arg)
},
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
})
}
</script>
原生ajax向后台提交文件
<input type="file" id="img" />
<a class="btn" onclick="AjaxSubmit6();">上传</a>
<script>
function AjaxSubmit7() {
var data = new FormData();
data.append('k1','v1');
data.append('k2','v2');
data.append('k3',document.getElementById('img').files[0]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
// 接收完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.open('POST','/ajax1.html');
xhr.send(data);
}
</script>
ajax之---上传文件的更多相关文章
- Ajax方式上传文件
用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- (23)ajax实现上传文件的功能
form表单上传文件 urls.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import ...
- SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)
1.准备工作 1.1.添加上传必要jar包 <dependency> <groupId>commons-io</groupId> <artifactId> ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- ajax如何上传文件(整理)
ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...
- django中通过文件和Ajax来上传文件
一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- ajax实现上传文件
1.html部分 <input style="width: 280px" type="file" name="upLoadProjectPl ...
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
随机推荐
- Linux基础 Day2
Linux-Day2 1.文件目录结构 文件和目录被组织成一颗倒置的树的结构 文件系统从根开始,"/" 文件名称严格区分大小写 隐藏文件以"."开头 路径的分隔 ...
- C++ Templates 目录
第1部分 : 基本概念 第1章 函数模板 1.1 初识函数模板 1.1.1 定义模板 1.1.2 使用模板 1.1.3 二阶段翻译 1.2 模板参数推导 1.3 多模板参数 1.3.1 返回类型的模板 ...
- Linux环境安装Docker入门教程
安装 下载 wget https://download.docker.com/linux/static/stable/x86_64/docker-18.06.1-ce.tgz 解压 tar -xvf ...
- JavaFX桌面应用-loading界面
上次使用JavaFX开发了一个视频转码工具,当用户点击"启动"按钮开始转码的时候,会禁用启动按钮,防止多次启动转码. 这种处理方式对用户来说可能并是很友好,其实可以在启动转码的时弹 ...
- latex:备忘代码
1.脚注代码: \footnote{欧几里德,约公元前330--340年.} 结果为: 2.改变某个字的字体形状,表示强调 \emph{勾股定理} 结果为(勾股数这三个字与其他字不一样): 3.正文中 ...
- Jenkins读取Allure结果出报告
1.想 jenkins 有展示和解析 Allure 报告的能力,就必须装 Allure 插件. 「安装插件地址:」 http://updates.jenkins-ci.org/download/plu ...
- Java数据结构——顺序表
一个线性表是由n(n≥0)个数据元素所构成的有限序列. 线性表逻辑地表示为:(a0,a1,…,an-1).其中,n为线性表的长度,n=0时为空表.i为ai在线性表中的位序号. 存储结构:1.顺序存储, ...
- Qt 关于图片打开,另存为,保存到指定位置操作
Qt 关于图片打开,另存为,保存到指定位置操作(转载) 在头文件mainwindow.h中先声明以下类: 1 #include <QImage> 2 #include <QPixma ...
- QString 字符串操作
Qt QString字符串分割.截取(转载) 在做项目中不可避免的会使用到一串字符串中的一段字符,因此常常需要截取字符串. 有两种方式可以解决这个问题: 方法一:QString分割字符串: QStri ...
- C++入门记-大纲
缘来 由于某个不可告人的目标以及想趁着还有精力的年龄,开始了C++学习之路.C++ 诞生很多年了,但依然具有强大的生命力. 我们来看下2020年8月TIOBE 8 月编程语言排行榜. 可以看到C以及C ...