原生JS实现文件上传

利用<input type="file">，带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作。
利用URL.createObjectURL()，URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

<body><input type="file" value="选择文件" id="file"><img src="" id="img" alt="暂无" width="70" height="70">
</body>
<script>const file = document.querySelector("#file");const img = document.querySelector("#img");file.onchange = function(e) {console.log(e);img.src = URL.createObjectURL(e.target.files[0]);}</script>

演示：

上传前：
上传成功：

原生JS实现文件下载

<body><input type="file" value="选择文件" id="file"><img src="" id="img" alt="暂无" width="70" height="70"><button id="down">下载</button>
</body>
<script>const file = document.querySelector("#file");const img = document.querySelector("#img");const down = document.querySelector("#down");let file1 = null;file.onchange = function(e) {console.log(e);file1 = e.target.files[0];  //  文件上传img.src = URL.createObjectURL(e.target.files[0]);}down.onclick = function() {let a = document.createElement("a");a.setAttribute("href", URL.createObjectURL(file1));a.setAttribute("download", "filename");a.click();}</script>

Vue实现文件上传与下载

下载

三种方式：

前端创建超链接，通过a标签的链接向后端发送get请求，接收后端的文件流。（或者创建div标签，动态创建a标签）
通过创建iframe
向后端发送post请求，使用Blob格式

上传

1.input方式

vue中的文件上传主要分为两步：前台获取到文件和提交到后台。

步骤：

①前台获取文件，主要是采用input框来实现
通过file类型的input框实现文件上传；然后通过设置multiple="multiplt"实现了多文件上传，并且使用accept实现了上传文件类型限制；最后通过监听change事件，前台获取到上传的文件；通过change事件中的event.target.files就能获取到上传的文件了，在上面再次对获取的文件进行了类型限制。

②数据提交
获取到文件数据后，采用FormData的方式将数据提交到后台。

element-ui的el-uplod组件实现
Upload 上传

参考：
vue上传文件和下载文件
vue 实现文件上传、下载的方法

JS实现文件的上传与下载相关推荐

Element UI 和js实现文件的上传和下载
文件上传 before-upload参数是在文件上传之前对文件进行一些验证 action参数是文件上传的服务器地址 this.uploadHref = this.baseUrl + '/tourism ...
文件的上传和下载---学习笔记
文件上传原理在TCP/IP中,最早出现的文件上传机制是FTP.它是将文件由客户端发送到服务器的标准机制. 但是JSP编程中不能使用FTP方法来上传文件,这是由JSP运行机制所决定的. JSP中上传文 ...
SpringMVC与JSON传值，取值，使用SpringMVC实现文件的上传与下载，SpringMVC拦截器
一. JSON 1.1 什么是JSON 在实际开发中,通常需要和别的系统交换数据,数据交换的格式通常有XML和JSON等: JSON(JavaScript Object Notation:JavaSc ...
手把手教你学javaweb（五）文件的上传和下载
javaweb项目文件的上传和下载在进行文件的上传和下载之前,我们先把javaweb项目做一点点的改动,那就是将LoginServlet的跳转由原来的forward方式改为 redirect方式 ...
SpringBoot实现oss文件的上传与下载
SpringBoot实现oss文件的上传与下载最近项目中需要通过OSS来实现文件的上传和下载以及根据oss文件(word模板)生成Word,特此记录,以便日后查阅. 一.相关概述 OSS对象存储 ...
SpringBoot+Vue3实现文件的上传和下载
目录前言上传前端页面上传后端代码下载后端代码下载前端代码总结参考文献前言上传文件和下载文件是我们平时经常用到的功能,接下来就让我们用SpringBoot,Vue3和ElementPl ...
nginx java文件上传_Nginx实现文件的上传和下载
文件的上传只要保证特殊的地址先到达Nginx,然后通过Nginx指定至指定的服务器即可,目前配置是本机.文件的下载的做法就是把本机的当前目录下面的文件给返回回去. server { listen ; ...
Vue实现Excel模板文件的上传与下载
Vue实现Excel模板文件的上传与下载一.前言越来越多的项目开始使用前后端分离的方式来进行开发了,前端使用的vue来进行页面处理的,所以正常的文件下载和上传肯定是少不了的,因为这也是自己第一次使 ...
SpringMVC实现文件的上传和下载
SpringMVC实现文件的上传和下载http://www.bieryun.com/1120.html 前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:"用什么技术来实现一般网页上文件的 ...
Akka实战：HTTP大文件断点上传、下载，秒传
2019独角兽企业重金招聘Python工程师标准>>> 访问:https://github.com/yangbajing/scala-applications/tree/master ...

JS实现文件的上传与下载

目录

原生JS实现文件上传

原生JS实现文件下载

Vue实现文件上传与下载

下载

上传

JS实现文件的上传与下载相关推荐

最新文章

热门文章