JS 用户头像展示

展示效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <script type="text/javascript">
        var all_picW = "100px";//预览的宽度
        var all_picH = "100px";//预览的高度
        function multiImagePreview(avalue) {
            var upMultilImagesObj = document.getElementById("upMultilImages");
            var picViewsBox = document.getElementById("picViewsBox");
            console.log();
            picViewsBox.innerHTML = "";
            var fileList = upMultilImagesObj.files;
            if (fileList.length > 0) {
                $(".imgAbstract").css("display", "none");
            }
       
            for (var i = 0; i < fileList.length; i++) {
                picViewsBox.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
                var picjPreviewInfo = document.getElementById("img" + i);
                if (upMultilImagesObj.files && upMultilImagesObj.files[i]) {
                    //火狐
                    picjPreviewInfo.style.display = 'block';
                    picjPreviewInfo.style.width = all_picW;
                    picjPreviewInfo.style.height = all_picH;
                    //picjPreviewInfo.src = upMultilImagesObj.files[0].getAsDataURL();
                    //火狐7+版本,用不了getAsDataURL()
                    picjPreviewInfo.src = window.URL.createObjectURL(upMultilImagesObj.files[i]);
                    console.log(picjPreviewInfo);
                } else {
                    //IE
                    upMultilImagesObj.select();
                    var picTagSrc = document.selection.createRange().text;
                    alert(picTagSrc);
                    var localImagId = document.getElementById("img" + i);
                    //设置初始大小
                    localImagId.style.width = all_picW;
                    localImagId.style.height = all_picH;
                    //图片异常捕捉
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picTagSrc;
                    }
                    catch (e) {
                        alert("图片格式不正确!");
                        return false;
                    }
                    picjPreviewInfo.style.display = 'none';
                    document.selection.empty();
                }
            }
            return true;
        }
    </script>
</head>
<body>
    <div class="editor-field">
        <input type="file" name="myFile" id="upMultilImages" multiple="multiple" onchange="javascript:multiImagePreview();" accept="image/*" />
        <div id="picViewsBox"></div>
        <div class="clear"></div>
        <span style="display:none;color:red;" class="imgAbstract"></span>
    </div>
    <div id="picViewsBox"></div>
</body>
</html>

相关阅读:
Minecraft 1.12.2/1.14.4 Mod开发笔记——搭建环境
 Minecraft 1.12.2 Mod开发笔记
 浅谈莫比乌斯反演
 卡迈克尔数
 一些可能会有用的东西（持续更新）
emacs配置
 CSPS 2020游记
 浅谈KMP
Atcoder AGC052
乌班图操作指令（持续更新）
原文地址：https://www.cnblogs.com/duhaoran/p/15502267.html