在过去,浏览器是不允许我们读取本地的文件,包括图片。因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问url地址,达到预览图片的功能。而如今,随着标准不断的改善,javascript里的API越来越多,我们可以通过直接读取本地文件的方式,加载我们想要看到的文本或者图片,一定程度上减少了服务端的压力。
接下来我们说一下运行环境和使用的库:
1. chrome 浏览器
2. zepto.js
其实在之前,我们有介绍过javascript里的 File 对象,它只能通过 input[type=file]元素获取。当用户触发了文件控件的onclick事件,同时选择了某一个文件确认时,触发文件控件的onchange事件。
一 : 案例页面结构
<body>
<article>
<header id="header"><h1>文件上传</h1></header>
<section class="box">
