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_ ... 
随机推荐
- itest(爱测试) 开源一站式敏捷测试管理平台&极简项目管理,重大升级(接口测试)6.0.0 发布
			itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试5合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代 ... 
- Kubernetes基于haproxy实现ingress服务暴露
			HAproxy Ingress控制器 HAproxy Ingress简介 HAProxy Ingress watches in the k8s cluster and how it builds HA ... 
- 火题小战 B. barbeque
			火题小战 B. barbeque 题目描述 \(Robbery\) 是一个大吃货(雾) 某个神奇的串由牛肉和青椒构成,于是\(Robbery\)购买了\(n\)个餐包来自己做这个串,每个餐包中有一些牛 ... 
- 使用对称加密来加密Spring Cloud Config配置文件
			补充 使用Spring Cloud Config加密功能需要下载JCE扩展,用于生成无限长度的密文.链接:http://www.oracle.com/technetwork/java/javase/d ... 
- 【SP2916】Can you answer these queries V - 线段树
			题面 You are given a sequence \(a_1,a_2,...,a_n\). (\(|A[i]| \leq 10000 , 1 \leq N \leq 10000\)). A qu ... 
- .NET Core + K8S + Apollo 玩转配置中心
			1.引言 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理 ... 
- 实现直方图均衡化(java+opencv)
			什么是直方图均衡化? 直方图均衡化是一种简单有效的图像增强技术,通过改变图像的直方图来改变图像中各像素的灰度,主要用于增强动态范围偏小的图像的对比度.原始图像由于其灰度分布可能集中在较窄的区间,造成图 ... 
- Linux基础 Day2
			Linux-Day2 1.文件目录结构 文件和目录被组织成一颗倒置的树的结构 文件系统从根开始,"/" 文件名称严格区分大小写 隐藏文件以"."开头 路径的分隔 ... 
- 启动tomcat出现闪退的原因
			出现闪退的可能有几点: 1.没有安装jdk或者配置jdk是否配置成功 2.找不到jdk安装的路径 3.tomcat环境配置失败 如果是第二点原因(确保第一第三点配置都正确无误)找不到jdk路径的话,可 ... 
- JavaFX桌面应用-loading界面
			上次使用JavaFX开发了一个视频转码工具,当用户点击"启动"按钮开始转码的时候,会禁用启动按钮,防止多次启动转码. 这种处理方式对用户来说可能并是很友好,其实可以在启动转码的时弹 ... 
