<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. Python基础篇【第8篇】: Socket编程（二）SocketServer

    SocketServer 在上一篇文章中我们学习了利用socket模块创建socket通信服务,但细心学习后就会发现利用socket模块创建的服务无法进行多进程的处理,当需要进行大量请求处理时,请求就 ...

  2. nginx入门

    1.   前言 Nginx是当前最流行的HTTP Server之一,根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中,Nginx的占有率为6.8%.与Apache相比,Ngi ...

  3. Python-4 变量、字符串

    #1 变量 1)使用前 先赋值 2)命名 字母.数字.下划线 且 不由数字开头 3)大小写不等 4)名字=值 5)尽量选取专业的名字 #2 字符串(文本) 1)字符串两边加引号 2)转义字符 \(反斜 ...

  4. sublimetext 3 set

    from https://segmentfault.com/a/1190000002596724{ "font_size": 21, "highlight_line&qu ...

  5. java 接口中模拟浏览器 请求webservice 接受返回数据

    使用HttpClient 所需jar:commons-codec-1.9.jar,commons-httpclient-3.1.jar try { HttpClient client = new Ht ...

  6. NK3C：关于svg文件使用

    我们从 http://iconfont.cn/ 上下载的SVG文件由以下构成,系统中使用的时候请做适当的修改: 1.width.Height:设置为100%: 2.defs模块去掉:(如果不去掉,IE ...

  7. Orcle基本语句（三）

    COMMIT; --查询表内所有内容 SELECT * FROM stu_info; --查询部分列,并赋予别名 SELECT stu_id 学生标号,stu_name 学生姓名 FROM stu_i ...

  8. IP地址划分

    对于32位的IPV4地址来说,有5中IP地址类型 A类IP地址第一个字节是网络地址,后三个字节是主机地址,且最高位以0开头. 0000001  00000000   00000000 00000001 ...

  9. MySQL索引原理及慢查询优化（转）

    add by zhj:这是美团点评技术团队的一篇文章,讲的挺不错的. 原文:http://tech.meituan.com/mysql-index.html MySQL凭借着出色的性能.低廉的成本.丰 ...

  10. Modified Least Square Method and Ransan Method to Fit Circle from Data

    In OpenCv, it only provide the function fitEllipse to fit Ellipse, but doesn't provide function to f ...