<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. gtest学习一：在vs2013中搭建gtest环境

    gtest版本:1.7.0,在哪里下载源码就不说了,网上太多了~ 配置过程: 1.下载解压后,进入googletest/msvc目录,直接打开gtest.sln,发现有四个工程:gtest.gtest ...

  2. Unity5中的MetaPass

    前些天烘焙lightmap的时候发现用自己写的Shader的模型在烘焙时候不会烘焙效果不对,它不会产生对周围物体的间接光照,但是我放到了unity4.x中就是没问题的.查了一番,发现Unity5中加了 ...

  3. QT总结第3篇：如何在QT中添加.lib，.dll还有.h文件

    因为我在工作的过程中,使用的是第三方提供的库,但是如何将这些库添加到QT的工程中,是个问题,让我恼火了很久,怎么弄都是错的. 下面,我会对这个问题,进行叙述,希望其他人第一次遇到这种问题的时候,可以轻 ...

  4. 关于Jquery中的$.each获取各种返回类型数据的使用方法

    var arr = [ "one", "two", "three", "four"]; $.each(arr, func ...

  5. CRLF和LF

    协作项目,开发环境不同(mac,window)构建过程中,命令行报错(expecting LF but only find CRLF) 打开git bash,输入 $ git config --glo ...

  6. QTP处理各类鼠标事件fireEvent

    在做web测试时,页面上的HTML标签会包含各类事件:单击(onclick).双击(onDblClick).光标聚集(OnBlur).onchange.onfocus.onmousedown.onmo ...

  7. Javaweb命名规则

    一.类命名命名规范:以大写字母开头,如果有多个单词,每个单词头字母大写.例如:StudentInfo 二.接口命名命名规范:以大写字母"I"开头,如果有多个单词,每个单词头字母大写 ...

  8. OAuth认证

    OAuth简介 OAuth是在不提供用户名和密码的情况之下,授权第三方应用访问Web资源的安全协议. OAuth允许用户提供一个令牌给第三方网站,一个令牌对应一个特定的第三方网站,同时该令牌只能在特定 ...

  9. C# 时间函数相减

    1:第一种方式: "; "; DateTime firstDateTemp = DateTime.ParseExact(firsttime, "yyyyMMddHHmms ...

  10. Foundation ----->NSArray

    .数组的创建     //注意:在OC的数组中,只能够存放对象 //    NSArray *array = [NSArray arrayWithObject:12];错误          //创建 ...