原生 Ajax - FormData 对象 实现文件上传即时预览

最新推荐文章于 2022-06-15 16:16:59 发布
VIP文章 最新推荐文章于 2022-06-15 16:16:59 发布
阅读量215 收藏
点赞数
文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56588657/article/details/124697682
版权
利用 XMLHttpRequest Level2 的新特性，不仅可以发送文本信息，还可以上传文件

实现步骤：

  1. 定义 UI 结构
  2. 向 FormData 对象 中追加文件
  3. 使用 xhr 发起 上传文件 的请求

定义 UI 结构

<!-- 引入 bootstrap3 样式文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<body>
    <div class="container">
        <div class="shell">
            <div class="form-group">
                <input type=
最低0.47元/天 解锁文章
Ծ‸Ծ小珂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery Ajax使用FormData对象上传文件的方法
11-23
但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax上传呢？ 本文将介绍通过jQuery使用FormData对象上传文件。 使用<form>表单初始化FormData对象方式上传文件 HTML代码 &...
原生ajax基于FormData对象实现上传功能以及进度条的实现
qq_40576178的博客
12-04 392
通过FormData快速收集表单数据 步骤: 给form中的标签设置name属性name="后端提供的字段名" 创建formdata对象,将整个form表单传进去var fd = new FormData(整个form表单) fd.get('字段名')方法可以查看获取表单中的某个值 注意: FormData通过原生ajax实现POST请求时,不再设置请求头且fd对象直接放在send()方法中即可! 正文: 如果后端说: 将文件必须保存在file中, 也就是给标签设置name="file"属性
【Ajax】- 使用 FormData() 实现文件上传
m0_55960697的博客
04-20 5459
主要的实现步骤： 1、使用文件选择器选择图片文件 2、把用户选择的文件存入 FormData 对象 3、使用 axios 把 FormData 发送给服务器 4、模拟文件选择器的点击事件 let iptFile = document.querySelector('#iptFile') // 用户选择文件之后所触发的事件：change iptFile.addEventListener('change', function () { // console.log(ip.
js ajax提交form表单,原生 ajax 提交form表单，上传文件解决方案
weixin_28972455的博客
08-05 434
原生 ajax 提交form表单，上传文件解决方案发布时间：2019-10-16作者：laosun阅读(1462)Ajax提交form表单，上传文件解决方案需要注意的是：input file 如果使用了js操作，比如.html、.before、或者.after等进行了操作，则不支持提取。varformData=newFormData();formData.append("myfile",...
Ajax上传文件(原生JS篇)
hellow_world_的博客
10-13 1万+
工作中用到了Ajax上传文件的情景 之前自己不知道ajax可以传 通过文档发现XHR2.0已经支持了 但需要集合ForData目录结构 test 一级 files 二级 index.html 二级 saveFiles.php 二级示例(根据上传文件的进度生成进度条)代码如下 HTML部分 <div class='progress'>
原生态的ajax如何上传文件,上传文件的两种方式:原生javascript拖拽与jquery
weixin_39545895的博客
08-05 728
长期以来上传都是在页面放一个input type=file标签，今天发现html5相关的javascript居然可以直接拖拽就可把系统里的文件上传到服务器，当然服务器还需一段接收的java代码。1.首先在拖拽区域(container)加入drop事件,注册handleDrop函数。var container = document.getElementById("container");var fi...
通过Ajax使用FormData对象无刷新上传文件方法
01-21
写在前面：本文说的这个方案有浏览器兼容性问题；所有主流浏览器的较新版本已经支持这个对象了，比如Chrome 7+、...②把表单serialize()序列化用Ajax的方式提交，也无法把上传文件的文件流进行序列化，也不行 我现有
wx-formdata:在小程序中使用formdata上传数据，可实现多文件上传
04-30
wx-formdata在小程序中使用formdata上传数据，可实现多文件上传用法跟浏览器中的FormData对象类似引入js文件const FormData = require('./formData.js')new一个FormData对象let formData = new FormData();...
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能
10-19
主要介绍了利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能,需要的朋友可以参考下
使用formdata上传文件并预览
m0_58853021的博客
05-23 233
使用formdata上传二进制文件并预览
Js原生ajax与跨域(代理)上传文件
09-29
Js原生ajax与跨域(代理)上传文件：JS原生模拟ajax请求与实现ajax跨域代理上传文件和jquery跨域上传文件Dome
FormData图片上传预览插件.zip
07-04
FormData图片上传预览插件是一款基于Bootstrap跟fileinput.js实现的图片上传插件下载。
php iframe 上传图片,ajax与iframe框架实现图片文件上传（图文详解）
weixin_35673021的博客
03-11 148
这次给大家带来ajax与iframe框架实现图片文件上传(图文详解)，ajax与iframe框架实现图片文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。大家应该可以举出几种常用的异步文件上传功能的实现方式，使用频率较多的有原生ajax和iframe框架，实现图片文件上传，下面就为大家分享图片文件上传的两种方式：原生ajax和iframe框架，供大家参考，具体内容如下方法一：利用ifram...
利用FormData对象实现AJAX文件上传功能及后端实现
weixin_33966365的博客
12-22 482
包括HTML基础设置、CSS界面优化、JS利用FormData对象和AJAX进行上传、后端接收文件并存储到指定路径以及删除文件操作。 FE HTML 基础的设置： <form enctype="multipart/form-data"> <input id="file" type="file" multiple="multiple" name="file" accept="...
利用FileReader和FormData实现图片预览和上传(base64转二进制文件)
热门推荐
hsany330的专栏
09-18 2万+
业务有个需求，要做图片预览上传，过去都是客户端上传给后端，后端返回 url 前端进行预览，现在其实可以不依赖后端做预览，最后在上传，这主要依赖 FileReader 和 FormData 这两个对象和 JavaScript 处理二进制的能力。 OK，Show code~，以下代码已注释掉具体业务逻辑和实现，如果需要了解 API 细节，可以请参考： https://developer
原生js配合ajax实现文件上传（兼容ie浏览器）
Shuang_gege的博客
06-15 1208
原生js配合ajax实现文件上传（兼容ie浏览器），及解决低版本ie浏览器文件上传兼容处理办法
原生Ajax实现formdata
m0_67387108的博客
05-07 477
利用Ajax来提交图片 原生Ajax无法携带图片上传 formdata提交 Ajax2.0版 原生Ajax实现formdata let form=documentElecmentById("form") form.onsubmit=function(){ //阻止默认事件return false //创建 xml对象 let f = new FormData(form) //将整体form表单的所有数据 转化为formdata let xml...
JavaScript - AJAX 通过 FormData 上传 form 表单中的所有数据（text 文本，files 图片等二进制文件）
kikajack的博客
02-01 3285
FormData 对象的使用 FormData 定义 1. FormData 对象 FormData 对象是 ES6 中的对象，IE10 以下不兼容。 利用FormData对象，可以通过 JavaScript 用键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest 的 send() 方法来异步的提交这个”表单”。比起普通的 ajax，使用 FormData 的最大优点就
FormData以及原生Ajax上传图片
李余通的博客
06-20 5597
Ajax对于表单提交来说，是一个很好的工具，他提供了异步提交的效果，这使得用户提交表单时不需要刷新页面就可获知提交成功与否，但一直以来，网上的示例大都是JQuery上传的教程，原生Ajax似乎并不受大家热爱，更别提原生Ajax上传图片的教程了，本篇将为你讲述JavaScript中使用FormData上传文件的教程 FormData FormData对象用以将数据编译成键值对，以便用XMLHtt...
如何使用 formData 和 ajax 工具实现文件上传功能
最新发布
06-09
要使用 formData 和 ajax 工具实现文件上传功能，你需要完成以下步骤： 1. 创建一个表单，包含一个文件上传表单项： ``` <form id="upload-form"> <input type="file" name="file" /> </form> ``` 2. 使用 FormData 对象构建表单数据： ``` const form = document.getElementById('upload-form'); const formData = new FormData(form); ``` 3. 使用 ajax 工具发送表单数据： ``` const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function () { // 文件上传成功的处理逻辑 }; xhr.onerror = function () { // 文件上传失败的处理逻辑 }; xhr.send(formData); ``` 在这个例子中，我们使用了 XMLHttpRequest 对象来发送 ajax 请求。你也可以使用其他的 ajax 工具，例如 jQuery 的 $.ajax 方法或 axios 库。 在服务器端，你需要处理文件上传请求，并将文件保存到服务器上。具体的实现方式取决于你使用的后端框架和语言。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值