上传 JSON 数据

使用fetch()来发布json编码的数据。

var url = 'https://example.com/profile';
var data = {username: 'example'}; fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上传文件

可以使用HTML<input type="file" />输入元素、FormData()和fetch()上传文件。

var formData = new FormData();
var fileField = document.querySelector("input[type='file']"); formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]); fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上传多个文件

可以使用HTML<input type="file" />输入元素、FormData()和fetch()上传文件。

var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]"); formData.append('title', 'My Vegas Vacation');
formData.append('photos', photos.files); fetch('https://example.com/posts', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

Rewrite JSON project with Fetch的更多相关文章

  1. Rewrite JSON with Fetch

    1.重写json请求部分:HTML文件代码如下:<html>......<script> var myList = document.querySelector(‘ul‘); ...

  2. Using Fetch to rewrite JSON

    截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  3. Rewrite json

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. Fetch:下一代 Ajax 技术

    Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...

  5. 这个东西,写C++插件的可以用到。 RapidJSON —— C++ 快速 JSON 解析器和生成器

    点这里 原文: RapidJSON —— C++ 快速 JSON 解析器和生成器 时间 2015-04-05 07:33:33  开源中国新闻原文  http://www.oschina.net/p/ ...

  6. fetch简明学习

    前面的话 Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网 ...

  7. angular-cli.json常见配置

    { "project": { "name": "ng-admin", //项目名称 "ejected": false / ...

  8. angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

    一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 &quo ...

  9. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

随机推荐

  1. -bash: yum: command not found

    在学习Linux时,发现yum命令无法执行.便查了下,整理成文. yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS ...

  2. Python——字符串

    p ython——字符串 ①加法 连接两个字符串 ②乘法  复制字符串 python——转义字符 \n 换行 \' 单引号 \'' 双引号 \\ 反斜杠 raw字符串:无视转义字符   转义: 字符串 ...

  3. LoadRunner学习笔记(二)

    LoadRunner Controller简介: 当虚拟用户脚本开发完成后,使用controller将这个执行脚本的用户从单用户转化为多用户,从而,模拟大量用户操作, 进而形成负债(多用户单循环,多用 ...

  4. 十 LVS 负载均衡

    回顾nginx 反向代理负载均衡 负载均衡的妙用 负载均衡(Load Balance)集群提供了一种廉价.有效.透明的方法, 来扩展网络设备和服务器的负载.带宽.增加吞吐量.加强网络数据处理能力. 提 ...

  5. 一次String的错误使用

    今日,在写代码的过程中,程序执行一个方法居然出现了heap space溢出的异常. 从来还没有遇到这样的异常,打断点发现是做字符串拼接时出现此异常. 所以知道了是String使用的异常,因为我做的操作 ...

  6. 学习笔记_J2EE_Spring(一)_入门

    3.      Spring概述 3.1.   Spring是什么 Spring是一个优秀的高可用的JavaEE轻量级开发框架.提供一站式开发解决方案. 3.2.   Spring框架出现的背景 在世 ...

  7. rsync拉取服务器上的代码到本地

    #!/bin/sh ];then echo "The parameters must be input:file path and host" read -p "(Exa ...

  8. 2018-2019-2 网络对抗技术 20165328 Exp2 后门原理与实践

    实验内容: 任务一:使用netcat获取主机操作Shell,cron启动任务二:使用socat获取主机操作Shell, 任务计划启动任务三:使用MSF meterpreter(或其他软件)生成可执行文 ...

  9. java日期间相隔年月日计算

    /**     * 获取date1相距date2多少天, date2>date1     * @param date1     * @param date2     * @return     ...

  10. sqlserver2008 触发器备份 20170811

    -------------触发器-----------------------------------------------base-----NO if (object_id('trigger_JP ...