电子商务网站建设需要知识,高端网站设计建设,网站开发语言 排行榜,小米的网站设计文章目录js之文件信息读取#xff08;FileReader#xff09;获取文件相关信息的两种方式js原生拖拽事件js之文件信息读取#xff08;FileReader#xff09;
首先这里面会讲一些知识点
bolb 对象FileReader对象 let blob new Blob([heewwekgewgwer], { type: text/plain …
文章目录js之文件信息读取FileReader获取文件相关信息的两种方式js原生拖拽事件js之文件信息读取FileReader
首先这里面会讲一些知识点
bolb 对象FileReader对象 let blob new Blob([heewwekgewgwer], { type: text/plain })let blob1 blob.slice(0, 6, text/plain)let reader new FileReader()reader.readAsText(blob1)// console.log(reader);reader.onload (res) {console.log(res.target.result)//heewwe}file文件是特殊的bolb对象是计算机用于存储2进制的一个信息然而这个信息只能通过FileReader对象来读取FileReader常用的一些方法 方法描述readAsArrayBuffer(file)读取文件或Blob作为数组缓冲区。 一种用例是将大文件发送给服务人员。,常用于分片传输readAsBinaryString(file)以二进制字符串形式读取文件readAsText(file, format)以USVString readAsText(file, format)读取文件(几乎像一个字符串)并且可以指定可选格式。常用于读取txt文件readAsDataURL(file)这将返回一个URL您可以在其中访问文件的内容它是Base64编码的可以发送到您的服务器,常用于读取上传图片视频等需要url的src的获取文件相关信息的两种方式
第一种使用input 标签在上传的时候change事件中 读取当前的input.files[0] input typefilescriptlet input document.querySelector(input)input.addEventListener(change, function () {let reader new FileReader()reader.readAsText(input.files[0]);console.log(reader);reader.onload (res) {console.log(res.target.result)}})/script第二种方式通过拖拽的方式获取里面的信息 div idapp/divscriptlet app document.querySelector(#app)console.log(app);app.ondragover function (e) {e.preventDefault();}app.ondrop function (e) {e.preventDefault()const files e.dataTransfer.filesconsole.log(files);}/scriptjs原生拖拽事件
div draggabletrue|false|auto //draggable true可拖拽false 不可拖拽 auto跟随浏览器特性dataTransfer获取拖拽信息
属性描述files其他属性返回和放置相关的所有文件types属性使用数组的形式返回当前注册格式effectAllowed此属性通知浏览器当前可被用户选用的操作dropEffect拖放的操作类型决定了浏览器如何显示鼠标形状items属性返回所有项与相关格式所有文件
拖拽元素与区域元素还有一些共享数据方法api eg e.dataTransfer.setDat( ‘data’,‘我是要储存的数据’ ) //在dataTransfer对象中注册此对象data e.dataTransfer.setDat( ‘text’,‘我是要储存的text数据’ ) e.dataTransfer.getData( ‘data’ ) e.dataTransfer.getData( ‘text’ ) 方法使用规则setData(type,data)用于声明发送的数据与类型getData(type)用于指定类型的dataclearData(type)清除指定类型的数据不填删除所有setDragImage(ele,x,y)使用图像元素为参考同时u使用此参数作为拖动返回的图像addElement(element)提供一个页面元素作为参考同时使用参数作为拖放反馈图像
ondragover ,ondrop这两个事件在使用的时候必须禁止默认行为 在拖放的过程中会触发以下事件 在拖动目标上触发事件 (被拖元素): 方法使用说明ondragstart用户开始拖动元素时触发ondrag元素正在拖动时触发ondragend用户完成元素拖动后触发释放目标时触发的事件:(拖放区域元素) 方法使用说明ondragenter当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragleave当被鼠标拖动的对象离开其容器范围内时触发此事件ondrop在一个拖动过程中释放鼠标键时触发此事件
完整案例 以下是简易的拖动图片到另一个元素里面细节自己调整 style#app {width: 200px;height: 200px;border: 1px solid red;}.bos {width: 200px;height: 200px;border: 1px solid blue;}img {width: 100px;}/stylediv idapp/divdiv classbos img src./img/a.jpg alt/divscriptlet app document.querySelector(#app)let bos document.querySelector(.bos)let img document.querySelector(img)//这个地方单纯为了实现修改小手的样式bos.ondragstart function (e) {//设置拖拽的背景图 就是把鼠标小手换成背景图e.dataTransfer.setDragImage(img, 10, 10)}app.ondragover function (e) {e.preventDefault();}app.ondrop function (e) {e.preventDefault()// 获取拖拽时候的文件内容const files e.dataTransfer.files[0]let reader new FileReader()//读取文件url地址reader.readAsDataURL(files)reader.onload res {// 设置背景图 你也可以用cavans去画app.style.backgroundImage url(${res.target.result})}}/script
