zoukankan      html  css  js  c++  java
  • HTML5 FormData 方法介绍以及实现文件上传

    XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。

    FormData 上传文件实例

    首先看一下formData的基本用法:FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可:

    var file;
    //获取目前上传的文件
    file = image.files[0];  //获取上传的文件名
    var formData = new FormData();
    formData.append('image', file); //append方法传入formData中

    这样就可以直接通过ajax 的 send() 方法将 fd 发送到后台。

    以下创建了一个表单 form,表单中除了普通的数据外,还有文件上传,我们直接将 form对象作为参数传入FormData对象:

    <input type="file" class="file" id="image" accept="image/gif,image/jpeg,image/jpg,image/png" />

    <button id="test" onclick="func()">demo</button>

    上述代码创建一个上传图片。

    我们初始用jquery ajax 来进行请求数据 代码如下

     1     var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";
     2       image_url = "http://localhost/sss/troop.jpg";
     3       var file;
     4       //获取目前上传的文件
     5       file = image.files[0];
     6       var formData = new FormData();
     7       formData.append('image', file);
     8 
     9         $.ajax({
    10         type: "POST",
    11         url: url,
    12         data: formData,   
    13         contentType: false, //告诉jQuery不要去设置Content-Type请求头
    14         headers: {
    15           Accept: "application/json"  
    16         },
    17         processData: false, //告诉jQuery不要去处理发送的数据
    18         success: function (response) {
    19           console.log(response)
    20         }

     然后我们用XHR原生请求代码如下

    1    var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";
     2       image_url = "http://localhost/sss/troop.jpg";
     3       var file;
     4       //获取目前上传的文件
     5       file = image.files[0];
     6       var formData = new FormData();
     7       formData.append('image', file);
     8        var xhr = new XMLHttpRequest();
     9        var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";;
    10        xhr.open('POST', url, true);
    11        xhr.setRequestHeader("Accept", "application/json");
    12        xhr.send(formData); 

    我们发现jQuery中ajax请求和XHR对象请求参数并不一样,因为在jquery中ContenType和processData会默认处理发送的数据,会导致请求报错(500错误,jquery给默认封装了

    因此在jQuery中要加false这两个参数。就会正常的请求成功。

  • 相关阅读:
    VUE图片懒加载-vue lazyload插件的简单使用
    vuejs+axios发送请求
    Vue2.0+Node.js+MongoDB全栈打造商城系统
    Vue基础知识之vue-resource和axios
    vue-resource
    css3 转换 过渡 及动画
    css sticky footer布局
    vue 前端生成二维码 (带图标)
    微信小程序学习四
    tradingview绘制K线周期切换保留指标
  • 原文地址:https://www.cnblogs.com/lhgis/p/9003665.html
Copyright © 2011-2022 走看看