多图片上传预览

转载 (原文地址) 1205017237 随笔 JS 194阅读 2018-01-02 14:26:10 举报

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--ios拖动隐藏浏览器底部工具栏-->
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="icon" href="data:image/ico;base64,aWNv">
<!-- 避免favicon.ico请求404 -->
<link href="" rel="stylesheet">
<style>
img {
vertical-align: top;
width:500px;
}
</style>
</head>

<body>
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
<script type="text/javascript">
function previewFiles() {

    var preview = document.querySelector('#preview');
    var files = document.querySelector('input[type=file]').files;

    function readAndPreview(file) {

        // Make sure `file.name` matches our extensions criteria
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
            var reader = new FileReader();

            reader.addEventListener("load", function() {
                var image = new Image();
                image.title = file.name;
                image.src = this.result;
                preview.appendChild(image);
            }, false);

            reader.readAsDataURL(file);
        }

    }

    if (files) {
        [].forEach.call(files, readAndPreview);
    }

}
</script>

</body>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复