多张图片上传并预览

最新推荐文章于 2023-02-16 10:32:02 发布

马可菠萝喵

最新推荐文章于 2023-02-16 10:32:02 发布

阅读量994

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：图片上传上传预览

本文链接：https://blog.youkuaiyun.com/Maggie95627/article/details/75097021

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片上传和预览功能。通过简单的HTML和JavaScript代码，用户可以选择多张图片并立即在页面上看到缩略图预览。该功能还包含了图片删除操作，并对浏览器兼容性进行了检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*引入js*/
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<div class="img_file">
    <input type="file" name="image" id="select_btn" multiple="multiple" title="点击选择图片"/>
    <div class="image_box">
    </div>
</div>

<script>
    $(function () {
        //图片预览
        $("#select_btn").bind('change', function () {
            var files = $(this);
            var file = files[0].files;
            if (typeof file == 'undefined') {
                alert('您的浏览器版本过低，请更新至最新版本');
                return false;
            }
            var file_length = file.length;
            for (var i = 0; i < file_length; i++) {
                send_xhr(file[i]);
            }
            return false;
        });
    });

    //上传图片
    function send_xhr(file) {
        var formData = new FormData();
        formData.append('file', file);
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xhr == null) {
            alert("您的浏览器不支持“XMLHTTP请求”，请更换其他浏览器试试。");
            return false;
        }
        xhr.open("POST", "{:U('TimeGoods/uploadImage')}", true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var obj = eval('(' + xhr.responseText + ')');
                if (obj.status == 0) {
                    alert(obj.info);
                } else {
                    add_img(obj.info);
                }
            } else {
                alert('上传失败!');
            }
        };
        xhr.send(formData);
        return false;
    }

    //上传图片end
    function init_btn() {
        //划过显示删除按钮
        $(".image_box>div").hover(function () {
            $(this).find('.image_del').fadeIn();
        }, function () {
            $(this).find('.image_del').fadeOut();
        });
        //划过显示删除按钮end
        //删除某张图
        $(".image_del").bind('click', function () {
            $(this).parent('div').remove();
        });
        //删除某张图end
    }

    //追加图片
    function add_img(img_path) {
        var html = '<div>';
        html += '<div class="image_del">del</div>';
        html += '<input type="hidden" name="images[]" value="' + img_path + '" />';
        html += '<img src="' + img_path + '" />';
        html += '</div>';
        $(".image_box").append(html);
        init_btn();
    }
</script>