js 单图片和多图片上传预览

最新推荐文章于 2022-05-17 01:23:22 发布

黑漆#000000

最新推荐文章于 2022-05-17 01:23:22 发布

阅读量446

点赞数

分类专栏： ⇨Web⇦ 文章标签： javascript 表单

本文链接：https://blog.csdn.net/fatong3/article/details/53243421

版权

⇨Web⇦ 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

单图片上传预览

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        #preview,.img,img {
            width: 200px;
            height: 200px;
        }

        #preview {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div id="preview"></div>
<input type="file" οnchange="preview(this)"/>
<script type="text/javascript">
    function preview(file) {
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
</script>
</body>
</html>

多图片上传预览、//

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" class="infi" id="txtpicss" multiple="multiple" runat="server" />

<div id="imgrqss" class="imgrqss" > </div>