<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. Win 8.1 Pro &amp;MSSQLServer 2014 Enterprise

    给Thinkpad E431 安装上 Windows 8.1 Pro 之后,一直都安装不上 MSSQLServer 2005 DEV / ENT,2008 ENT / STAND, 2008 R2  ...

  2. （dp）343. Integer Break

    Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...

  3. HttpContextBase转换成HttpContext对象

    有以下方法: 主要是方式就是通过context获取HttpApplication,然后通过Application获取相应的HttpContext ①HttpContext context=HttpCo ...

  4. percent的用法

    select*from test; 先查询所有的结果一共是8条记录 select top(50)  percent *from test; 则只查询该表中百分之50的结果集

  5. python 中变量的命名方法

    从网上找到django中python的命名规范 Python  规范 代码的布局  编码 所有的Python脚本文件都应在文件头标上“# -*- coding:utf-8 -*-”.  缩进 4个空格 ...

  6. 嵌套 QQ、微博 通讯工具到HTML中

    自己QQ.微博的实例: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...

  7. [转载]python操作excel使用win32com

    原文链接:http://blog.163.com/yang_jianli/blog/static/16199000620138532243782/ 使用COM接口,直接操作EXCEL(只能在Win上) ...

  8. NPOI操作Excel导入DataTable中

    using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.Data; using System.IO; using NPOI.X ...

  9. 跨域的get和post的区别

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二.最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数.当你在面试中被 ...

  10. thinkPHP--CURD操作

    1.数据创建 2.数据写入 3.数据读取 4.数据更新 5.数据删除 一．数据创建 在数据库添加等操作之前,我们首先需要对数据进行创建.何为数据创建,就是接受提 交过来的数据,比如表单提交的 POST ...