找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发使用<input type=\'file\'>上传图片实现本地图片预览

2019-01-22 分类：JavaScript 阅读(1204) 评论(0)
网络前端开发前景怎么样
前端开发怎么找实习
前端开发人员怎么分工

1.修改原始<input type=’file’>样式：
原始的<input type=’file’>样式

这个标签的样式不可以用css修改，想要美化它可以使用其他标签代替，隐藏原来的input标签。比如使用<label></label>标签，label标签的样式可以随意修改。label标签的for属性可以关联input标签的id,点击label标签时，可以触发input标签的点击事件。
2.获取选择的文件信息：
使用chang事件监听是否选择文件，若选择了文件，就可以获取<input type=’file’>的files属性，files属性值为一个类数组对象，有length属性，里面的元素就是用户所选的文件列表。若用户选择了一个文件，则files[0]就是该文件。若input有multiple 属性，用户可以选择多个文件，则可以像循环数组一样取出里面的所有被选文件，可得到被选文件的名称，大小，类型，文件的最后修改时间等信息。
javascript 代码

var fileObj = document.getElementById(‘file’).files
for (var i = 0, len = fileObj.length; i < len; i++) {
    console.log(fileObj[i].name) //文件的名称
    console.log(fileObj[i].size) //文件的大小
    console.log(fileObj[i].type) //文件的类型
    console.log(fileObj[i].lastModifiedDate) //文件的最后修改时间
}
//1KB=1024B,1M=1024KB
//files[i].size取到的数值单位是B;

3.使用FileReader对象，读取文件实现图片预览：
构造函数FileReader()：返回一个新构造的FileReader对象，该对象包含的属性方法有：
属性：

状态常量：

方法：
abort() ：中止该读取操作，readyState属性的值为DONE。
readAsArrayBuffer()：读取File对象中的内容，读取操作完成时，readyState属性的值会成为DONE，如果设置了onloadend事件处理程序,则会调用。同时result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容
readAsDataURL()：读取File对象中的内容， 读取操作完成时，readyState属性的值会成为DONE如果设置了onloadend事件处理程序,则会调用。同时result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容,预览本地图片就是使用此方法读取内容。
事件：
onabort：当读取操作被中止时调用
onerror：当读取操作发生错误时调用
onload：当读取操作成功完成时调用
onloadend：当读取操作完成时调用，不管是成功还是失败。该处理程序在onload或者onerror之后调用
onloadstart：当读取操作将要开始之前调用
onprogress：在读取数据过程中周期性调用

多图预览代码：
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>文件上传</title>
        <style type=”text/css”>
            label {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                padding: 0px 10px;
                background-color: #1e9fff;
                color: #fff;
                border-radius: 5px;
                margin-bottom: 5px;
            }
            img {
                height: 200px;
                width: 300px;
                border: 1px solid #d8d8d8;
            }
        </style>
    </head>
    <body>
        <label for=”file”>选择本地图片</label>
        <input
            type=”file”
            style=”display: none;”
            multiple=”multiple”
            id=”file”
        />
        <div id=”img-cont”></div>
    </body>
    <script type=”text/javascript”>
        var reader
        document.getElementById(‘file’).onchange = function() {
            var imgfile = this.files
            for (var i = 0, len = imgfile.length; i < len; i++) {
                var imageType = /^image\//
                if (!imageType.test(imgfile[i].type)) {
                    console.log(
                        ‘文件：’ + imgfile[i].name + ‘不是图片，请选择图片！’,
                    )
                    continue
                } else {
                    if (imgfile[i].size > 300 * 1024) {
                        console.log(‘图片尺寸不超过300kb！’)
                        continue
                    } else {
                        var img = document.createElement(‘img’)
                        document.getElementById(‘img-cont’).appendChild(img)
                        reader = new FileReader()
                        reader.onload = (function(img) {
                            return function(e) {
                                img.src = e.target.result
                                console.log(e.target.result)
                            }
                        })(img)
                        reader.readAsDataURL(imgfile[i])
                    }
                }
            }
        }
    </script>
</html>
怎么搭建前端开发环境
前端开发怎么提高效率
前端项目开发怎么写
赞(0)
前端开发者 » 前端开发使用<input type=\'file\'>上传图片实现本地图片预览
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论