zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    程序返回插入数据库成功,但是数据库内却没有数据
    C++ 使用动态二维数组参数
    深入理解.Net中的内存释放,以及有关的注意事项
    用数据集时,错误:未能启用约束。一行或多行中包含违反非空、唯一或外键约束的值
    关于堆和栈
    C#加密方法总汇
    const与readonly
    struts 将上传文件保存到数据库中
    java Annotation注解的运用
    转:获取汉字的拼音(包括一级和二级)
  • 原文地址:https://www.cnblogs.com/duhaoran/p/14291436.html
Copyright © 2011-2022 走看看