“伪”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. 第一个Mybatis

    第一个Mybatis 思路:搭建环境-->导入Mybatis-->编写代码-->测试 1.搭建环境 新建maven工程,配置xml文件 <?xml version=" ...

  2. day3 基本语句

         代码缩进为一个tab键  就是四个空格           断点   在代码首行前空白处,双击  然后点右上角臭虫  然后点下面箭头朝下的 1.if 语句  if 判断条件:         ...

  3. Orcal语法Merge into用法

    Orcal语法 Merge into 1.语法介绍 MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行 ...

  4. C++中将对象this转换成unsigned char指针

    示例程序 // ---CodeBlob.h--- #ifndef CODEBLOB_H_ #define CODEBLOB_H_ class CodeBlob { private: const cha ...

  5. LNK2005 连接错误解决办法 2009-10-30 12:13

    nafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new(unsigned int)" (??2@ ...

  6. Lambda表达式的几种实现过程

    1.无参数+语句(代码块):适用于匿名内部类中方法无参数的情况 private void threadTest(){ //普通写法 new Thread(new Runnable(){ @Overri ...

  7. 笔记:Linux下软件的安装、CentOS更新yum源、LAMP环境搭建、kali软件管理

    一.Linux下软件的安装 方式:yum源 / rpm /源码安装 1.yum:(帮助管理员解决依赖关系) yum是通过分析rpm的包头数据后,根据各种软件的相关性质做出属性相对应的解决方案,然后可以 ...

  8. Dubbo直连方式

    目录 一.dubbo概述 1. 基本架构 2. dubbo 支持的协议 二.直连方法 三.创建服务提供者 1. 思路 1. 创建maven web 2. pom.xml 3. 创建实体 4. 创建服务 ...

  9. rabbitmq python demo 参考链接地址

    链接地址: https://docs.openstack.org/oslo.messaging/latest/reference/server.html https://www.cnblogs.com ...

  10. CCF-202006-1线性分类器

    1 def judga(lis1,z): #判断列表lis1中点是否都在线z的一侧 s=0 for i in lis1: if z[0]+i[0]*z[1]+i[1]*z[2]>0: s+=1 ...