AJAX实现图片文件上传

1.文件上传流程

1）客户端将文件数据发送给服务器

2）服务器保存上传的文件数据到服务器端

3）服务器响应给客户端一个文件访问地址

2.与服务器端的约定

1）键的名称（表单域名称）：imagefile

2）请求方法：POST

３）请求的表单格式：multiparty/form-data

4）请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据

【注】HTML5中，JS仍然无法随意获取文件数据，但是可以获取到input元素中，被用户选中的文件数据

【注】可以利用HTML5提供的FormData构造函数来构造请求体

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="" alt="" id="imgAvatar"><input type="file" id="avatar"><button>上传</button><script>async function upload() {//获取表单信息const inp = document.getElementById('avatar');//判断是否已选择上传文件if (inp.files === 0) {alert("请选择要上传的文件");return;}const formData = new FormData();    //构建请求体formData.append("imagefile", inp.files[0]);     //添加键值对const url = "http://101.132.72.36:5100/api/upload";const resp = await fetch(url, {method: "POST",body: formData});const result = await resp.json();return result}document.querySelector("button").onclick = async function () {const result = await upload();const img = document.getElementById("imgAvatar");img.src = result.path;}</script>
</body></html>

AJAX实现图片文件上传相关推荐

原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
.Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
axios文件上传 formdata_基于业务场景下的图片/文件上传方案总结
图片/文件上传组是企业项目开发中必不可少的环节之一, 但凡涉及到用户模块的都会有图片/文件上传需求, 在很多第三方组件库(ant desigin, element ui)中它也是基础组件之一. 接下来 ...
基于Python Flask框架+jquery Ajax技术实现的增删改查（CRUD）+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面注册界面,用的bootstrop的弹窗,用户名和密 ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
springmvc图片文件上传接口
springmvc图片文件上传用MultipartFile文件方式传输 Controller package com.controller;import java.awt.image.Buffere ...
php是视频还是图片格式,php 视频、音频和图片文件上传,该如何解决
PHP code<?php ob_start(); $uploadDir = dirname(__FILE__).'/upload'; //自动创建目录 if(!file_exists($upl ...
Java实现图片文件上传
Java实现图片文件上传 Java实现后台图片上传,将上传图片的接口进行分层,便于维护接口. 接口部分(interface) 将接口分为单图片上传以及多图片上传 public interface Fi ...
php中图片文件上传，显示缩略图
php中图片文件上传,显示缩略图 htm代码块: <meta charset="utf-8" /> <style>img {max-width: 100px ...

AJAX实现图片文件上传

AJAX实现图片文件上传相关推荐

最新文章

热门文章