“伪”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之---上传文件的更多相关文章

  1. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

  2. koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  3. (23)ajax实现上传文件的功能

    form表单上传文件 urls.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import ...

  4. SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)

    1.准备工作 1.1.添加上传必要jar包 <dependency> <groupId>commons-io</groupId> <artifactId> ...

  5. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  6. ajax如何上传文件(整理)

    ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...

  7. django中通过文件和Ajax来上传文件

    一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...

  8. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  9. ajax实现上传文件

      1.html部分 <input style="width: 280px" type="file" name="upLoadProjectPl ...

  10. 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

随机推荐

  1. golang 设计模式

    前言 不做文字的搬运工,多做灵感性记录 这是平时学习总结的地方,用做知识库 平时看到其他文章的相关知识,也会增加到这里 随着学习深入,会进行知识拆分和汇总,所以文章会随时更新 参考的文章过多.很杂很乱 ...

  2. MongoDB学习1:认识文档数据库MongoDB

    1. 关于MongoDB 什么是MongoDB 一个以JSON为数据模型的文档数据库 为什么叫文档数据库 文档来自于"JSON Document",并非我们一般理解的pdf,wor ...

  3. 设计模式:建造者模式及在jdk中的体现,建造者模式和工厂模式区别

    0.背景 建造模式(Builder模式) 假如有一个需求:盖房子,盖房子过程是一致的:打桩.砌墙.封顶.但是房子是各式各样的,最后盖出来的房子可能是高楼或别墅. 根据直接的思路,不用设计模式思想,我们 ...

  4. 数据库之Oracle优化技巧(二)

    1.通过内部函数提高 SQL 效率 复杂的 SQL 往往牺牲了执行效率. 能够掌握上面的运用函数解决问题的方法在实际 工作中是非常有意义的 . 2.使用表的别名(Alias) 当在 SQL 语句中连接 ...

  5. 通过phpstudy安装wordpress、使用BP拦截POST型请求包

    使用BP拦截POST型请求包 一.安装phpstudy https://www.xp.cn/download.html 二.安装wordpress Step1:下载wordpress源码,https: ...

  6. JavaScript学习系列博客_6_JavaScript中的算数运算符

    运算符(操作符) 在JS中 +.-.*./.%这些都是算数运算符,typeof也是一个运算符,它的操作结果就是得到一个描述变量数据类型的字符串. + 运算符 1.两个值在都没有string类型的值的情 ...

  7. 阿里云鼠标垫,云中谁寄锦书来,阿里云定制GIT指令集鼠标垫

    活动地址 云中谁寄锦书来 活动时间 2020.8.19-8.28 奖品 必得,每日200份,共2000份 参考答案 tips:单选选择以上都是,多选就是全选 云效DevOps包含哪些产品- ABCDE ...

  8. cinderclient命令行源码解析

    一.简介 openstack的各个模块中,都有相应的客户端模块实现,其作用是为用户访问具体模块提供了接口,并且也作为模块之间相互访问的途径.Cinder也一样,有着自己的cinder-client. ...

  9. 基于 abp vNext 微服务开发的敏捷应用构建平台 - 设计构想

    许多中小企业的管理模式都是在自身的发展过程中不断摸索,逐步建立起来的,每一家都有其独有的管理模式,而且随着企业的不断发展,管理模式也在不断变化中.企业在发展壮大的过程中离不开信息化系统的支撑,企业在构 ...

  10. php 解决表单重复提交实现方法介绍

    重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交,同时还可以使用php来防止重复提交哦. 例1  代码如下 复制代码 <?php/* * php中如何防止表单的重复提 ...