JS 多图片上传预览展示

一、效果展示
二、代码
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>多图上传测试</title>
    <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");
            picViewsBox.innerHTML = "";
            var fileList = upMultilImagesObj.files;
            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]);
                } 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>
    <style>
        .clear {
            clear: both;
            height: 0;
            line-height: 0;
            font-size: 0
        }
    </style>
</head>

<body>
    <div>
        <input type="file" name="file" id="upMultilImages" multiple="multiple"
            onchange="javascript:multiImagePreview();" accept="image/*" />
        <div id="picViewsBox"></div>
        <div class="clear"></div>
    </div>
</body>

</html>