文章目录

js的拖拽上传,并在页面中展示

文章目录
前言
一、js实现拖拽功能(文件拖拽到指定位置)
二、关于怎么读取文件内容(用到FileRead()对象)
- 1.第一步:遍历传递过来的file
- 2.第二步:判断传递过来的文件是否是图片格式
- 3.第三步:创建 new FileRead() 对象,然后拿到创建的对象调用 readAsDataURL(f) 方法
- 4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src
问题(解决方案):

前言

本次实现的功能,也可以通过更改事件属性:转变成点击然上传文件的转变(点击上传文件这里就不在展示了,基本思路都很像!!)

话不多说,直接上代码!!!

一、js实现拖拽功能(文件拖拽到指定位置)

div.addEventListener(‘dragenter’, denter);
div.addEventListener(‘dragover’, dover);
div.addEventListener(‘drop’, dp)
绑定了三个事件分别是: 1.拖拽文件进入div 2.拖拽文件在div上 3.鼠标松开

 <div class="box"></div><script>let div = document.querySelector('.box');div.addEventListener('dragenter', denter);div.addEventListener('dragover', dover);div.addEventListener('drop', dp)function denter(e) {e.preventDefault();}function dover(e) {e.preventDefault();}function dp(e) {e.stopPropagation(); //阻止事件冒泡e.preventDefault();//阻止默认事件 (上面的都一样)//拿到拖拽的文件var file = e.dataTransfer.files//调用函数传递文件的内容,然后进行解析转化为bas64格式的内容handFiles(file);}</script>

二、关于怎么读取文件内容(用到FileRead()对象)

1.第一步:遍历传递过来的file

2.第二步:判断传递过来的文件是否是图片格式

3.第三步:创建 new FileRead() 对象,然后拿到创建的对象调用 readAsDataURL(f) 方法

4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src

代码如下（示例）：

function handFiles(file) {for (let index = 0; index < file.length; index++) {var f = file[index];//判断是否是图片var imageType = /^image/if (!imageType.test(f.type)) {continue};//创建图片var im = document.createElement('img');/*  im.classList.add('obj'); */div.appendChild(im);//读取文件对象var reader = new FileReader(); //读取文件对象//通过reader开始读取内容,一旦读取成功,会在result属性中获取一个base64的字符串//读取文件是一个异步过程reader.readAsDataURL(f);//这里使用了一次立即执行函数(解决的问题是变量作用域带来的问题)reader.onload = function(aimg) {//第一种直接给src赋值//  im.src = e.target.result        return function(e) {aimg.src = e.target.result;}}(im)}}

问题(解决方案):

这个方法的案例,容易在修改图片地址的位置,出现变量作用域的问题导致图片地址无法被正常更改,解决方法:①使用闭包函数解决 ②使用立即执行函数 ③将所有的变量都用 es6 的let声明.

JavaScript 上传文件并展示相关推荐

javascript上传文件后台接收
今天在wordpress后台管理的插件管理界面,想添加一个ajax无刷新的上传,然后折腾了一下午,对于一个干前端的来说真心是惭愧呀! 好的,先说一下思路: 上传文件,必需得取得当前的文件的数据流,然后 ...
aws s3直接通过JavaScript上传文件
在html页面通过js上传文件,直接看代码 <!DOCTYPE html> <html> <head> <title>AWS S3 File Uploa ...
java websocket 上传大文件,使用java websocket API和Javascript上传文件
我正在学习websocket并且已经使用websocket / json完成了聊天程序.但我坚持上传ATM的文件.任何建议&回答会很感激. 服务器端: package websocket; i ...
浏览器 JavaScript 上传文件笔记
文章目录前言直接发送files[0] 用 FormData 用 new FormData(formElement); 用 new FormData(); , FileInput来自form 用 n ...
ajax上传文件：ajaxSubmit使用
大多上传文件的时候,都是使用表单的方式进行提交的. 使用form表单上传文件,也有很多种方式: 1.界面上直接使用submit按钮提交.这种方式可以实现效果但是没有success事件.即,可以上传文件 ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...
文件上传并展示上传文件
1.问题背景利用文件上传组件file,上传文件后并显示文件(图片) 2.实现源码 <!DOCTYPE html> <html><head><meta cha ...
bootstrap-fileinput上传文件插件按钮展示隐藏
隐藏删除图标和拖动图标 $('#business_license').fileinput({layoutTemplates :{// footer:'',//隐藏全部小图标:// actionUplo ...
javascript构造可以上传文件的form表单（通过js修改enctype）
在上传文件时,我们都知道需要在form表单中加上enctype="multipart/form-data".而在开发过程中,也有可能遇到需要用javascripts构造form表单 ...

JavaScript 上传文件并展示

文章目录

js的拖拽上传,并在页面中展示

前言

一、js实现拖拽功能(文件拖拽到指定位置)

二、关于怎么读取文件内容(用到FileRead()对象)

1.第一步:遍历传递过来的file

2.第二步:判断传递过来的文件是否是图片格式

3.第三步:创建 new FileRead() 对象,然后拿到创建的对象调用 readAsDataURL(f) 方法

4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src

问题(解决方案):

JavaScript 上传文件并展示相关推荐

最新文章

热门文章

JavaScript 上传文件并展示

文章目录

js的拖拽上传,并在页面中展示

前言

一、js实现拖拽功能(文件拖拽到指定位置)

二、关于怎么读取文件内容(用到FileRead()对象)

1.第一步:遍历传递过来的file

2.第二步:判断传递过来的文件是否是图片格式

3.第三步:创建 new FileRead() 对象,然后 拿到创建的对象调用 readAsDataURL(f) 方法

4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src

问题(解决方案):

JavaScript 上传文件并展示相关推荐

最新文章

热门文章

3.第三步:创建 new FileRead() 对象,然后拿到创建的对象调用 readAsDataURL(f) 方法