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

网络前端开发前景怎么样
前端开发怎么找实习
前端开发人员怎么分工

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>
    <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>
怎么搭建前端开发环境
前端开发怎么提高效率
前端项目开发怎么写
» 本文来自:前端开发者 » 《前端开发使用<input type=\’file\’>上传图片实现本地图片预览》
» 本文链接地址:https://www.rokub.com/7943.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!