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_ ...
随机推荐
- 多次调用Promise的then会返回什么?
//做饭 function cook(){ console.log('开始做饭.'); var p = new Promise(function(resolve, reject){ //做一些异步操作 ...
- 提升团队幸福感之:集成 GitLab && JIRA 实现自动化工作流
佛罗伦萨 - 圣母百花圣殿(图) 前言 GitLab 和 Jira 是平时开发过程中使用非常高频的代码管理系统(开发人员)和项目管理系统(项目管理),通过两套系统的协作完成平常大多数的功能开发,但是两 ...
- unity探索者之微信分享所有流程,非第三方插件
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/7560575.html 很久没有写新博客了,前段时间有些忙,这几天趟了几个微信分享的 ...
- PythonCrashCourse 第五章习题
5.1编写一系列条件测试;将每个测试以及你对其结果的预测和实际结果都打印出来.你编写的代码应类似于下面这样: car = 'subaru' print("Is car == 'subaru' ...
- 大整数加法C++(计蒜客)
求两个不超过 200200 位的非负整数的和. 输入格式 有两行,每行是一个不超过 200200 位的非负整数,可能有多余的前导 00. 输出格式 一行,即相加后的结果.结果里不能有多余的前导 00, ...
- 8.hbase写入流程和读取流程
1 hbase写入流程 hbase中无论是新增数据还是修改已有行,其内部流程都是一样的,hbase执行写入时会写到两个地方,write-ahead log 简称wal 也叫hlog 预写式日志 和 M ...
- Linux环境下安装MySQL数据库
Linux安装mysql服务分两种安装方法: (1).源码安装,优点是安装包比较小,只有十多M,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容易出错: (2).使用官方编译好的二进制文件安装,优 ...
- c++右值引用和转移构造函数
int &&i = ; //i绑定到了右值1 int b = ; cout << i << endl; //输出1 i = b; cout << i ...
- 第二篇Scrum冲刺博客--Interesting-Corps
第二篇Scrum冲刺博客 站立式会议 1.会议照片 2.队友完成情况 团队成员 昨日完成 今日计划 鲍鱼铭 主页页面和探测空间设计及布局实现 主页页面跳转社区功能及社区设计及布局实现 叶学涛 设计页面 ...
- wc.exe程序
1.gitHub地址:https://github.com/loveYuJun/wc.exe.git 2.PSP表格 psp2.1 Personal Software Process Stages 预 ...