<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. 问题解决_WCF_WCF 接收我服务的 HTTP 响应时发生错误

    原文地址:http://www.cnblogs.com/tianma3798/p/5470974.html 错误内容: System.ServiceModel.CommunicationExcepti ...

  2. 说说无耻的商河水木清华开发商2013"交房

    说说无耻的水木清华开发商2013"交房" 我买的是22号楼,合同里写的是2011年6月30号前交房.4月28我手机响了,电话那边说是水木清华的,29号交房.说交房通知书已经EMS发 ...

  3. 虚拟机中CentOS 7下PHP环境配置

    为了简单起见,虚拟机网卡设置为桥接模式 1.yum install  httpd php 2.yum install mariadb 3.启动mariadb systemctl start maria ...

  4. HTML 浏览器显示控制

    //强制浏览器以最高版本运行页面 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" ...

  5. Entity Framework学习笔记——记一个错误解决方式及思路

    继续之前设定的学习目标前,先来一篇小小的外篇.按照第一篇里的配置方式配置好的工程前两天还能正常工作,昨天却突然无法通过Add-Migration命令进行数据库的升级.错误信息如下: System.Da ...

  6. 一、OWIN初探

    前言 OWIN在.NET Web Servers与Web Application之间定义了一套标准接口,OWIN的目标是用于解耦Web Server和Web Application.基于此标准,鼓励开 ...

  7. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

  8. 用world写blog

    一级目录 怎么写呢? 这个和markdown那个更加方便呢? 据说插入表格有问题 我试一试         二级目录 这个大小还不错 添加第三季目录呢 三级目录 添加目录必须要用鼠标么? #inclu ...

  9. 用Qt Creator 对 leveldb 进行简单的读写

    #include <iostream> #include <string> #include <leveldb/db.h> #include <boost/l ...

  10. /proc/net/tcp中各项参数说明

    /proc/net/tcp中的内容由tcp4_seq_show()函数打印,该函数中有三种打印形式,我们这里这只列出状态是TCP_SEQ_STATE_LISTENING或TCP_SEQ_STATE_E ...