使用javascript原生功能实现,点击上传文件,然后再网页上显示出来

1. 初级显示

1.1 准备一个input标签和一个img标签

<input type=file id="file">
<img id="preview" src="">

1.2 js代码如下

 // 将上传的图片显示到页面上function showUpload() {// 选择文件上传控件var file = document.querySelector('#file')var img = document.querySelector('#preview')// 当用户选择完文件以后file.onchange = function() {// 1.创建文件读取对象var reader = new FileReader()// 用户选择的文件列表// console.log(this.files[0])// 2. 读取文件reader.readAsDataURL(this.files[0])// 3. 监听 onload 事件reader.onload = function() {img.src = reader.result}}}showUpload();

1.3 原理说明:

img可以根据图片的二进制格式,将图片显示再网页上
FileReader对象可以将图片转换成二进制格式.

2. 实现多图片上传并显示.

说明一下…没有传递给服务器…即没有存在服务器的磁盘上…仅仅只是再客户端的内存中…关了就没了…

2.1 上传控件和容器的准备

先准备html,和一个放图片的容器

<!-- 注意 此处多了multiple -->
<input type="file" id="file" multiple>
<div class="container">
</div>

2.2 js代码思路

首先获取input的dom.然后监听它的提交事件file.onchange
上传的图片组可以通过this.files访问到.
根据this.files的数量,创建同等数量的img标签document.createElement('img')
设置img标签的属性,并追加到container里面dom.appendChild

实现代码如下:

function showMultiUpload() {var file = document.querySelector('#file')var dom = document.querySelector('#imgs')dom.innerHTML = ''file.onchange = function() {for (var i = 0; i < this.files.length; i++) {var img = document.createElement('img')img.width = '100'img.height = '100'var reader = new FileReader()reader.readAsDataURL(this.files[i])reader.onload = function() {img.src = reader.resultdom.appendChild(img)}}}
}
showMultiUpload()

2.2 错误说明

1.上面上传了7张图片,但是在浏览器上面只显示了一张,原因是
2.javascript中的for循环是同步执行的,而将图片转换成二进制代码的接口readAsDataURL是异步的
3.因此需要使用闭包来延长参数的作用域
4.使用一个立即执行函数如下:

function showMultiUpload() {var file = document.querySelector('#file')var dom = document.querySelector('#imgs')dom.innerHTML = ''file.onchange = function() {for (var i = 0; i < this.files.length; i++) {var that = this;(function(i) {var img = document.createElement('img')img.width = '100'img.height = '100'var reader = new FileReader()reader.readAsDataURL(that.files[i])reader.onload = function() {img.src = reader.resultdom.appendChild(img)}})(i)}}
}
showMultiUpload()

ps:选择多个文件的时候,需要按住alt或者shift

javascript --- 文件上传即时预览闭包实现多图片即时预览相关推荐

uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
JavaScript 文件上传详解
本文为 Qunar 技术沙龙投稿,版权归原作者所有,未经允许,请勿转载. 原文地址:http://mp.weixin.qq.com/s/KWFyJa06CNXrU8zhSzzQFQ 作者:梁志,201 ...
axios文件上传 formdata_基于业务场景下的图片/文件上传方案总结
图片/文件上传组是企业项目开发中必不可少的环节之一, 但凡涉及到用户模块的都会有图片/文件上传需求, 在很多第三方组件库(ant desigin, element ui)中它也是基础组件之一. 接下来 ...
ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
【简报】超棒的拖放式文件上传javascript类库：FileDrop
为什么80%的码农都做不了架构师?>>> 日期:2012-8-30 来源:GBin1.com 今天推荐一款来自俄国web开发人员的支持拖放的跨浏览器javascript文件上 ...
JavaScript实现限制文件上传类型和大小
JavaScript实现限制文件上传类型和大小 <title>文件上传前台控制检测程序 v0.6</title> <style>body,td {font-size ...
前后端分离微服务管理系统项目实战SaaS-HRM项目(九)——文件上传与PDF报表入门
文章目录九.文件上传与PDF报表入门 1.图片上传 <1>.Data URL (1).概述 (2).入门 (3).基本原理 (4).优缺点分析 <2>.实现用户头像上传 2. ...
WEUI文件上传详解
本文通过我个人设计的系统为案例来教会读者使用weui的uploader,先来看看效果图: 图片上传框 PC端移动端首先,微信的官方文档不会一步一步教会你怎么用,但是在其中能发现很多使用的细节,推荐 ...
php文件上传学习记录
php文件上传学习记录 1.多文件上传及预览功能效果: 代码分两部分: 1.index02.html 2.file_preview.php 1.index02.html: <!DOCTYPE h ...

javascript --- 文件上传即时预览闭包实现多图片即时预览

1. 初级显示

1.1 准备一个input标签和一个img标签

1.2 js代码如下

1.3 原理说明:

2. 实现多图片上传并显示.

2.1 上传控件和容器的准备

2.2 js代码思路

2.2 错误说明

javascript --- 文件上传即时预览闭包实现多图片即时预览相关推荐

最新文章

热门文章

javascript --- 文件上传即时预览 闭包实现多图片即时预览

1. 初级显示

1.1 准备一个input标签和一个img标签

1.2 js代码如下

1.3 原理说明:

2. 实现多图片上传并显示.

2.1 上传控件和容器的准备

2.2 js代码思路

2.2 错误说明

javascript --- 文件上传即时预览 闭包实现多图片即时预览相关推荐

最新文章

热门文章

javascript --- 文件上传即时预览闭包实现多图片即时预览

javascript --- 文件上传即时预览闭包实现多图片即时预览相关推荐