上传多张图片并预览_csdn怎么发布多张图片-优快云博客

本文介绍了一种实现图片上传及预览功能的方法。通过使用HTML与JavaScript结合的方式，可以实现在用户选择图片文件后立即在页面上显示所选图片的预览效果。该方法支持多种图片格式，并且可以通过简单的代码进行扩展。

<div class="ft-pic">
    <div class="ft-pic-left">
        <span class="ft-pic-wz">添加图片</span>
    </div>
    <div style="clear: both"></div>
    <div id="uploadFiles" class="row">
    </div>
</div>

<script>
    $(document).ready(function(){
        addUploadFileDiv();
    });

    function addUploadFileDiv() {
        if ($(".uploadFile").size() < 9) {
            var uploadFileDiv = '<div class="uploadFile" style="display: inline-block;margin: 5px;"><input name="files[]" type="file" size="2" accept="image/png,image/jpeg" onchange="previewImage(this)" style="position:absolute;filter:alpha(opacity=0);opacity:0;width:100px;height:100px;"><div class="prvid"><img src="/static/img/studentlist/pic.png" width="100px" height="100px"></div></div>';
            $('#uploadFiles').append(uploadFileDiv);
        }
        return null;
    }

    function previewImage(file) {
        /* file：file控件
         * prvid: 图片预览容器
         */
        var tip = "Expect jpg or png or gif!"; // 设定提示信息
        var filters = {
            "jpeg": "/9j/4",
            "gif": "R0lGOD",
            "png": "iVBORw"
        }
        prvbox = $(file).next();
        file2 = file;
        if (window.FileReader) { // html5方案
            for (var i = 0, f; f = file.files[i]; i++) {
                var fr = new FileReader();
                fr.onload = function (e) {
                    var src = e.target.result;
                    if (!validateImg(src)) {
                        Materialize.toast("请上传图片", 4000);
                    } else {
                        if ($(file).parent().next().size() == 0) {
                            addUploadFileDiv();
                        }
                        showPrvImg(src);
                    }
                }
                fr.readAsDataURL(f);
            }
        } else { // 降级处理
            if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
                Materialize.toast("请上传图片", 4000);
            } else {
                addUploadFileDiv();
                showPrvImg(file.value);
            }
        }

        function validateImg(data) {
            var pos = data.indexOf(",") + 1;
            for (var e in filters) {
                if (data.indexOf(filters[e]) === pos) {
                    return e;
                }
            }
            return null;
        }

        function showPrvImg(src) {
            prvbox.empty();
            var img = document.createElement("img");
            img.src = src;
            img.style.width = '100px';
            img.style.height = '100px';
            prvbox.append(img);
        }
    }

</script>