js上传文件通过 浏览器获取文件地址 blob 回显

最新推荐文章于 2023-07-29 20:30:59 发布
最新推荐文章于 2023-07-29 20:30:59 发布
阅读量829 收藏
点赞数
分类专栏： js杂 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42684136/article/details/118720682
版权

file.path[0].files[0]

window.webkitURL.createObjectURL
ƒ createObjectURL() { [native code] }
file
Event {isTrusted: true, type: "change", target: input, currentTarget: input, eventPhase: 2, …}
file.path[0].files[0]
File {name: "测试条形码2.jpg", lastModified: 1623137188713, lastModifiedDate: Tue Jun 08 2021 15:26:28 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 6012, …}
window.webkitURL.createObjectURL(file.path[0].files[0])
"blob:http://170.0.32.229:8778/dd8117c8-8a44-4ad4-8efd-1cdf6df3fbf2"
awehhh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js如何获取图片url的Blob值并预览示例代码
01-21
前言 Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧 方法如下 1）使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var xhr = new XMLHttpRequest(); xhr.open(get, u
javascript上传文件到服务器,js实现图片上传到服务器和回显
weixin_35123329的博客
08-02 619
关于js实现图片的上传和回显，曾经用户的代码粘在这里：样式：这样写样式的道理是给标签的父级设置一个背景图，就是‘+’那个背景图，然后把的宽高设置得跟父级一样，且完全透明(注意是透明不是隐藏)，这样点击的时候看似是点击的‘+’的节点，其实点击的是节点。.file-box {position: relative;display: inline-block;width:100px;height:100p...
js文件上传有关Blob对象，FileReader对象，ArrayBuffer对象的详解
denghuanzhangsong的博客
06-14 3496
下面链接讲的很详细，先记着，等弄明白了再总结 https://www.cnblogs.com/hhhyaaon/p/5929492.html
获取上传文件的本地路径blob并展示
m0_59324006的博客
10-21 1199
实现视频 上传后在本地环境即可展示，代码如下： <html> <head> <meta charset="UTF-8"> <title>Video Demo</title> </head> <body> <input type="file" name="file" id="upload" /> <video id="videoA" controls="true" widt
js 获取图片url的Blob值并预览
jacke121的专栏
03-09 1万+
js 获取图片url的Blob值并预览 1）使用 XMLHttpRequest 对象获取图片url的Blob值 参考：https://www.cnblogs.com/tujia/p/6483255.html //获取图片的Blob值 function getImageBlob(url, cb) { var xhr = new XMLHttpRequest(); ...
利用Blob进行文件上传的完整步骤
10-18
BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。下面这篇文章主要给大家介绍了关于利用Blob进行文件上传的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
javascript使用Blob对象实现的下载文件操作示例
10-15
在JavaScript中，Blob对象是用来表示不可变的原始数据，它不是JavaScript的内置数据类型，而是用来存储二进制数据的一种方式。Blob对象是File对象的基础，File对象在Blob的基础上增加了与用户系统文件交互的能力。本...
原生js实现文件上传、下载、封装等实例方法
01-21
一 、下载 1、代码 const fileDownloadClick = (obj) => { // 解决兼容 if( document.all ){ obj.click(); } else { let event = document.createEvent(MouseEvents); event.initEvent('click', true, true);...
在JS中发送ajax请求，并且解析后台返回的Blob类型数据，将数据转换为文件
tuomazhao的博客
04-17 1万+
在JS中如何发送ajax请求，并且解析后台返回的Blob类型数据，将数据转换为文件导出，附带兼容IE8等浏览器 普通的jQuery中的ajax请求后台，并不能处理Blob类型的数据，这里用的原生的XMLHttpRequest请求后台 这里是做报表导出功能的一种实现： //点击-报表导出-执行事件 function reportExport(){ // 获取页面当前选中记录行 var ...
JS前端读取本地上传的File文件对象内容（包括Base64、text、JSON、Blob、ArrayBuffer等类型文件）
最新发布
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-29 1663
FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。FileReader.readAsArrayBuffer() - Web API 接口参考 | MDN。
百度云存储 BOS javascript sdk 开发问题小记 ( angular )
Wu_shuxuan的博客
08-27 1481
node.js 引用sdk 直接在 index.html 中引入 <script src="https://bce.bdstatic.com/lib/@baiducloud/sdk/1.0.0-rc.10/baidubce-sdk.bundle.min.js"></script> 使用时需要的信息 初始化BosClient declare var baidub...
js-Blob浅析
莫兮的博客
03-21 507
js-Blob浅析 目录 文章目录前言推荐阅读文件作为`Blob``index.html` - `input`上传文件`js`下载`Blob`构造`Blob``Blob URL``index.html``blobFiles.js`读取`Blob` - `FileReader`使用`FileReader`读取文本文件 前言 Blob： 可以存储到数据库 postMessage发送到其他窗口和worker XMLHttpRequest的send方法 createObjectURL()获取特殊的blob://
Javascript中Blob介绍
似水光阴
06-01 8955
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示： 如你所见，myBlob 对象含有两个属性：size 和 type。其中 属性用于表示数据的大小（以字节为单位）， 是 MIME 类型的
JS获取本地图片和网络图片的宽高尺寸和存储大小
万少博-FE
07-08 8290
最新更新时间：2020年07月08日09:13:28 《猛戳-查看我的博客地图-总有你意想不到的惊喜》 本文内容：图片作为一种记录信息的载体，比文本更加生动，比视频更加精简，在日常生活中的用处很大。作为前端开发人员，操作图片的场景非常多，本文记录读取本地图片的尺寸和容量，已经获取网络图片的尺寸和容量。 读取本地图片 html <input type="file" onChange={(e)=>{this.onChange(e)}} className={styles.getImg}
java如何解析blob路径_如何从对象URL获取文件或blob？
weixin_31222161的博客
02-24 3286
不幸的是，@ BrianFreud的答案不符合我的需求，我有一点不同的需求，我知道这不是@BrianFreud的问题的答案，但是我将它留在这里因为很多人带着我的同样需要来到这里 . 我需要“如何从URL获取文件或blob？”这样的内容，并且当前正确的答案不符合我的需求，因为它不是跨域的 .我有一个网站，它使用来自Amazon S3 / Azure存储的图像，并在那里存储以uniqueidentif...
js blob转File
zhoudekuai的专栏
03-08 2万+
由于Edge浏览器不支持new File，所以要先将dataURL转换成blob再转成File，但按照网上程序的转换后，用ajax上传到服务器，在服务器获取到的文件名一直都是blob，而不是设置的文件名，多方查找到发现只要在提交表单append方法后跟文件名就可以了。 function dataURLtoBlob(dataurl) { var arr = dataur...
js-用于上传的FormData与Blob
热门推荐
火星男孩的分享空间
04-19 3万+
BLOB BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。 在计算机中，BLOB常常是数据库中用来存储二进制文件的字段类型。 BLOB是一个大文件，典型的BLOB是一张图片或一个声音文件，由于它们的尺寸，必须使用特殊的方式来处理（例如：上传、下载或者存放到一个数据库）。 构造方法 script> var blob = new
JS-前端使用Blob和File读取文件
BigKongfuPanda的博客
04-07 2万+
目录 Blob及其属性和方法 File FileReader及其属性和方法 URL及其属性和方法 历史上，JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5 引入了 Blob 对象...
JS 上传文件之FormData 与Blob 对象
Rand Tsui
03-20 1万+
SA $.domLoad(function () { var formdata = new FormData(); formdata.append("a","ffdfdf"); formdata.append("file1",new Blob(["Hello World!"],{t
js 获取自身文件的Blob对象
05-29
如果你想要获取这个文件的 Blob 对象，可以使用以下方法： 1. 为 `<input>` 标签添加 `change` 事件监听器，当用户选择文件后触发该事件。 ```javascript const input = document.querySelector('input[type="file...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值