“伪”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. 使用 JSON 协议的 gRPC

    JSON payload 实现简易的请求和响应的内省. 介绍 大家经常说 gRPC 是基于 Google Protocol Buffers payload 格式的,然而这不完全正确.gRPC payl ...

  2. 炼技术(9): 简约而不简单,永不停歇的测试 -- always_run

    最强战力,永不停歇的测试:always_run 许多工程师写完程序后,都不愿意对自己的程序做仔细测试. 很多测试说会做自动化测试,可能工作好几年都没真做过多少自动化测试. 我们的解决方案是,在系统的测 ...

  3. 每天都在用String,你真的了解吗?

    1.String概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如"abc")都可以被看作是实现此类的实例 String 中包括用于检查各个 ...

  4. RFC2474 - Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers的双语版

    RFC2474 - Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers英文版 ...

  5. idea配置opencv

    参考:https://blog.csdn.net/sinat_38102206/article/details/81156589 配置运行时参数.通过菜单“Run->Edit Configura ...

  6. golang 创建 tun 设备

    源码: package main import ( "flag" "fmt" "github.com/pkg/errors" "n ...

  7. win PHP7安装oracle扩展

    环境介绍:win10.phpstudy php7.2版本 一.设置php.ini php.ini中开启相关扩展:extension=php_oci8_12c.dll.extension=php_pdo ...

  8. Open MPI 4.0 编译安装

    电脑上目前使用的mpi环境是2.1.1版本的openmpi,是我之前直接使用系统的包管理工具安装的.但是系统包版本一般都比较老旧,现在openmpi最新版已经出到了4.0,即将出4.1了,所以我打算升 ...

  9. TCP为什么需要握手

    一.TCP握手流程 二.为什么不是4次握手 TCP的每次请求都是成对的,原则上应该是四次 [Client to Server]第一次SYN,seq=x [Server to Client]第二次ACK ...

  10. 学习lammps 对in文件的一个概述性心得(转载)

    转载自:http://muchong.com/html/201411/8149677.html 写在开头:1.尽量列举了大部分(几乎)的命令2.带星号命令非常重要,大家在看mannual中命令的解释的 ...