<body>

  <input id="file_upload" name="file_upload" type="file" multiple="true" />

    <script>

    $('#file_upload').on('change',function(){

      var that = this;

      var files = this.files[0];

      console.log(files);

      var form = new FormData();

      form.append('file',files);

      $.ajax({

        url:'../demo',

        data:form,

        method:'post',
　　　　 contentType:false,

        processData: false,//此处是data的预处理，需要设置为false才可以

      });

    });

    </script>

</body>

　　js的发送

<body>

<input type="file" id="file" name="myfile" />

<input type="button" onclick="UpladFile()" value="上传" />

    <script type="text/javascript">

        function UpladFile() {

            var fileObj = document.getElementById("file").files[0]; // 获取文件对象

            var FileController = "./";     // 接收上传文件的后台地址

            // FormData 对象

            var form = new FormData();

            // 可以增加表单数据

            form.append("file", fileObj);         // 文件对象

            // XMLHttpRequest 对象

            var xhr = new XMLHttpRequest();

            xhr.open("post", FileController, true);

            xhr.onload = function () {

                alert("上传完成!");

            };

            xhr.onprgress = function(a,b,c){

                console.log(a +"++"+b+"__"+"c")

            };

            xhr.load = function(){

                cnosole.log('');

            }

            xhr.send(form);

        }

</script>

</body>

　　每一种方法都有 new FormDate()这个对象，这是最重要的

jq 和 原生js进行传输文件ajax请求的更多相关文章

  1. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  2. 原生js实现文件下载并设置请求头header

    原生js实现文件下载并设置请求头header const token="自行定义";//如果有 /** * 向指定路径发送下载请求 * @param{String} url 请求路 ...

  3. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  4. 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）

    一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. jq 与原生js 方法互相转换

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6.7.8.9.10.chrom ...

  6. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  7. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  8. 原生js上传文件，使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

  9. 用原生JS&PHP简单的AJAX实例

    功能介绍: 1)file.html 使用 xmlhttp 请求服务器端文件 text ,并更新 file.html 的部分内容 2)update.html 使用 xmlhttp 通过 filewrit ...

随机推荐

  1. ubuntu14.04 JDK安装

    JDK7 安装 1 sudo apt-get install openjdk-7-jdk 2 设置安装环境 在/etc/profile中追加: # Java support # export JAVA ...

  2. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

  3. Shade Exaple1

    Shader "Custom/Diffuse Texture" { Properties { _MainTex ("Base (RGB)", 2D) = &qu ...

  4. day9mysql操作

    #!/usr/bin/env python #coding:utf8 import MySQLdb pip install MySQL-python 先创建一个表 mysql> use xym; ...

  5. FreeBSD从零开始---安装后配置（一）

    一.安装后配置   上次我们说到FreeBSD的安装,这次我们说FreeBSD安装后的配置和简单优化方法.   安装完BSD只是服务器提供服务这条万里长征路的开始,还需要一些基本的设定和优化.不过实际 ...

  6. 如何去除My97 DatePicker控件上右键弹出官网的链接

    http://my97.net/dp/My97DatePicker/calendar.js?最后结尾处: 这个就是官网链接地址了. 然后查找 net,nte,ent,etn,ten,tne最终找到了“ ...

  7. Oracle数据库监听服务无法启动

    (1) 安装好Oracle后,启动Net Manager,测试orcl失败,报错“ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务”,需要修改监听文件.修改前: # list ...

  8. （Hibernate进阶）Hibernate映射——多对多关联映射（八）

    多对多映射是现实生活中最常见的映射,也是最容易理解的映射.废话少说,直接开始. 映射原理 不论是单向关联还是双向关联都是通过第三张表,将两个表中的主键放到第三张做一个关联.用第三张表来解决可能会造成数 ...

  9. 针对APP的测试过程和重点关注内容，做以下梳理和总结

    转载自金阳光测试:http://blog.sina.com.cn/s/blog_12df1b9e60102vy57.html   1. 首先是测试资源确认及准备 (1)产品需求文档.产品原型图.接口说 ...

  10. [转]常用的快速Web原型图设计工具

    转自大神: http://www.cnblogs.com/lhb25/archive/2009/04/25/1443254.html 做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具 ...