0 2 3 5 ★ Web课程input上传并显示 |【番外篇】

不二如是 · 发表于 2018-12-23 11:07:41

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2019-1-5 15:07 编辑

上一篇：0 2 3 4 ★ 得此‘十’概念者得JS天下

登录/注册后可看大图

在020 - 无敌是多么寂寞（III）小甲鱼老师带我们学习input元素的type属性的上传功能。

代码很简单：

<form action="upload.php" method="post">
选择一个文件: <input type="file" name="filedata">
</form>

复制代码

在这里会默认大家已经了解这个玩法，不会的鱼油可以自行看视频（传送门）

在使用上述操作后，当我们成功上传文件，只会看到：

没错，只有文件的名字。

鱼油会问：“我想在网页端看到我上传的图片怎么办？”

嗯，问得好，这个就是接下来学习的重点！

JavaScript操作

没错，上面那个好问题的答案，已经不是HTML5和CSS3能处理的了了。

接下来我们要请出一位大神：JavaScript。

我们先修改一下上面的代码：

<form>
选择一个文件: <input type="file" name="filedata" id="myFile" onchange="upLoad()">
</form>

复制代码

添加 id 和 onchange 事件，先编写 onchange 事件来显示一下我们上传的图片对象信息。

现在把完整代码贴一下，接下来只提供 JS ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
</head>
<body>
<form>
选择一个文件: <input type="file" name="filedata" id="myFile" onchange="upLoad()">
</form>
<script>
function upLoad(){
var file = document.getElementById('myFile');
// 输出图片名称
console.log(file.value);
// 输出已经选择的图片对象
console.log(file.files[0]);
}
</script>
</body>
</html>

复制代码

通过上面的控制台输出，我们确认 file 对象已经保存了图片的相关信息。

接下来，怎么把这些数据渲染成图片并在页面中显示呢？

此时就需要 blob 对象了。

Blob 对象表示一个不可变、原始数据的类文件对象。

Blob 表示的不一定是 JavaScript 原生格式的数据。

File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

定义是不是很复杂，没关系，暂时知道用来显示图片的就行。

首先我们要把上面的 file 对象转换为 blob 对象（添加代码）：

var blob = window.URL.createObjectURL(file.files[0]);

复制代码

URL.createObjectURL() 方法会根据传入的参数创建一个指向该参数对象的URL。

这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或者是Blob对象。

在 form 元素中创建一个 img 来显示我们要的图片：

<img id="myImg">

复制代码

img 元素有一个 src 属性用来获取指定的图片路径，我们只需要将上面的 URL 赋值给这个属性就好。

图片大家自己找哈，png，jpg 都可以哦。

并用 JS 获取：

var blobImg = document.getElementById('myImg');

复制代码

赋值路径：

blobImg.src = blob;

复制代码

这样上传图片就会看到：

除了 blob 对象我们还可以用 base64。

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。

由于，所以每6个位元为一个单元，对应某个可打印字符。

3个字节有24个位元，对应于4个Base64单元，即3个字节可由4个可打印字符来表示。

常用来作为电子邮件的传输编码，用来显示图片也可以。

我们直接用上面创建的 img 元素来演示（暂时注释掉blob的），代码：

// file 转 base64
var base64Img = document.getElementById('myImg');
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (e) {
console.log('base64==>'+this.result);
base64Img.src = this.result;
}

复制代码

这样看 blob 对象和 base64 都可以预览图片，但是 blob 对象仅仅是当次缓存。

如果刷新，你重新把之前转的字符串放到src是不可以预览的，当时base64是可以的。

所以存库的时候不仅可以图片路径，还可以直接存base64。

但是 base64 很占用数据库空间，文件越大，base64字符串越大。

细节优化

下面我们对上面示例做优化，可以上传多张图片并预览，美化界面。

我们重新创建一个 div ，从头做起，然后发到宝典中供更多人使用哈。

源码下载：

游客，如果您要查看本帖隐藏内容请回复

基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="鱼C工作室|免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发|加密与解密|Linux教学">
<meta name="description" content="鱼C工作室为大家提供最有趣的编程视频教学。">
<meta name="author" content="鱼C工作室">
<title>鱼C-上传</title>
</head>
<body>
<div id="img-pre">
</div>
<div id="add-pic">
<input type="file" id="up-file" onchange="fChange()">
</div>
</body>
</html>

复制代码

上传按钮背景图（可自行准备哈）：

upload.zip (11.1 KB, 下载次数: 3, 售价: 3 鱼币)

CSS 美颜：

<style>
#add-pic{
width: 200px;
height: 200px;
background: url('img/upload.png')
}
#add-pic input{
width: 100%;
height: 100%;
display: none;
}
#img-pre:after{
display: block;
content: '';
clear: both;
}
#img-pre img{
float: left;
width: auto;
height: auto;
margin-right: 10px;
}
</style>

复制代码

简单的前端页面搭建好了，现在单击图片还没有反应，我们需要 JS 来实现：

var addPic = document.getElementById('add-pic'), upFile = document.getElementById('up-file');
// 监听图片点击，从而触发input file的点击事件
addPic.addEventListener('click', function(){
upFile.click();
})

复制代码

这样单击图片就有上传的界面了，fchange() 方法就是上传并显示的核心，用上面 blob 的方式实现：

function fChange() {
var file = document.getElementById('up-file');
var imgPre = document.getElementById('img-pre');
// file 转 blob对象
var bold = window.URL.createObjectURL(file.files[0]);
// 创建img元素，并添加到img-pre元素里
var img = document.createElement("img");
img.setAttribute("src", bold);
imgPre.appendChild(img);
}

复制代码

测试一下，单击上传图片，一气呵成：

后续还可以继续优化，比如栅格布局，隐藏上传按钮等等操作。

欢迎鱼油下方留言回复你DIY的结果，有鱼币哦～

登录/注册后可看大图

下一篇：0 2 3 6 ★ 原生JavaScript的事件委托

如果喜欢，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列Js帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

287187056 · 发表于 2020-4-3 04:15:52

提示: 作者被禁止或删除内容自动屏蔽

tianyuan · 发表于 2020-5-11 13:40:15

优时风 · 发表于 2020-10-22 20:04:00

chenjunhuicool · 发表于 2022-7-3 08:02:07

wayc

jack6666 · 发表于 2022-10-14 14:01:57

账号		自动登录	找回密码
密码			立即注册

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-3 04:15:52 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 2 3 5 ★ Web课程input上传并显示 |【番外篇】

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: