0 2 3 5 ★ Web课程input上传并显示 |【番外篇】
本帖最后由 不二如是 于 2019-1-5 15:07 编辑上一篇：0 2 3 4 ★ 得此‘十’概念者得JS天下
static/image/hrline/2.gif
在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);
}
</script>
</body>
</html>
通过上面的控制台输出，我们确认 file 对象已经保存了图片的相关信息。
接下来，怎么把这些数据渲染成图片并在页面中显示呢？
此时就需要 blob 对象了。
Blob 对象表示一个不可变、原始数据的类文件对象。
Blob 表示的不一定是 JavaScript 原生格式的数据。
File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
定义是不是很复杂，没关系，暂时知道用来显示图片的就行。
首先我们要把上面的 file 对象转换为 blob 对象（添加代码）：
var blob = window.URL.createObjectURL(file.files);
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);
reader.onload = function (e) {
console.log('base64==>'+this.result);
base64Img.src = this.result;
}
这样看 blob 对象和 base64 都可以预览图片，但是 blob 对象仅仅是当次缓存。
如果刷新，你重新把之前转的字符串放到src是不可以预览的，当时base64是可以的。
所以存库的时候不仅可以图片路径，还可以直接存base64。
但是 base64 很占用数据库空间，文件越大，base64字符串越大。
细节优化
下面我们对上面示例做优化，可以上传多张图片并预览，美化界面。
我们重新创建一个 div ，从头做起，然后发到宝典中供更多人使用哈。
源码下载：**** Hidden Message *****
基本结构：
<!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>
上传按钮背景图（可自行准备哈）：
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);
// 创建img元素，并添加到img-pre元素里
var img = document.createElement("img");
img.setAttribute("src", bold);
imgPre.appendChild(img);
}
测试一下，单击上传图片，一气呵成：
后续还可以继续优化，比如栅格布局，隐藏上传按钮等等操作。
欢迎鱼油下方留言回复你DIY的结果，有鱼币哦～
static/image/hrline/2.gif
下一篇：0 2 3 6 ★ 原生JavaScript的事件委托
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列Js帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
{:10_277:} 1 wayc 1
页:
[1]