【javascript】File API 读取并显示本地图片 -1_js file 默认读取本地1.jpg-优快云博客

本文链接：https://blog.youkuaiyun.com/lizixiang1993/article/details/45197171

在过去,浏览器是不允许我们读取本地的文件,包括图片。因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问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">
        <form id="form" enctype='multipart/form-data' method='post'   action='#'>
            <div class="upload-label"><h2>请选择文件</h2></div>
            <div class="upload-box add-button"></div>
            <button class="upload-button" type="submit">上传</button>
            <input type="file" name="files"  id="files" >
        </form>
        </section>

    </article>
</body>