上传图片预览功能

最新推荐文章于 2022-09-28 13:17:18 发布

风中的流水

最新推荐文章于 2022-09-28 13:17:18 发布

阅读量160

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43324513/article/details/84955370

本文介绍了一种在网页上实现图片预览的功能，通过JavaScript根据不同浏览器类型和版本，使用HTML5 FileReader API或不同方法来预览用户上传的图片，支持.jpg、.bmp、.gif、.png格式。

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

所实现的功能为：点击上传图片的时候可以预览图片

/**
 * 预览图片
 */
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
    //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
    var allowExtention = ".jpg,.bmp,.gif,.png";
    //extention  接受上传图片的格式
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    /*browserVersion
    window.navigator.userAgent    判断pc端浏览器的类别
    toUpperCase()   转换成小写字母
    */
    var browserVersion = window.navigator.userAgent.toUpperCase();
    /*判断上传文件 格式是否符合要求
    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
    如果没有找到匹配的字符串则返回 -1。
    */
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
            //判断浏览器是否支持FileReader
            //支持FileReader浏览器的用户可以通过一个file input选择一个图像文件将图片显示在页面中，而不用发送到后端
            if (window.FileReader) {
                //将图片展示出来
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("不支持Safari6.0以下浏览器的图片预览!");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                if (browserVersion.indexOf("MSIE 9") > -1)
                    fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                var newPreview = document.getElementById(divPreviewId + "New");
                if (newPreview == null) {
                    newPreview = document.createElement("div");
                    newPreview.setAttribute("id", divPreviewId + "New");
                    newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
                    newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
                    newPreview.style.border = "solid 1px #d2e2e2";
                }
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                var tempDivPreview = document.getElementById(divPreviewId);
                tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                tempDivPreview.style.display = "none";
            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7以下版本
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("仅支持" + allowExtention + "为后缀名的文件!");
        fileObj.value = "";//清空选中文件
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }
        fileObj.outerHTML = fileObj.outerHTML;
    }
}

//点击事件   上传时调用该方法
function view_photo() {
    console.log($("input[id='fileInp']")[0]);
    console.log($("input[name='picPathUpdate']")[0]);
    /*
    Img是放置图片的img的id
    Imgdiv 是img外的div
    */
    PreviewImage($("input[name='image']")[0], 'imageid', 'divid');
}
//示例代码
<div style="margin-top: 10px">
    图片路径：<input  type="file" name="image" data-options="required:true" onchange="view_photo()"/>
</div>
<div style="margin-top: 10px" id="divid">
    图片展示：<img id="imageid" style="width: 100px"/>
</div>

改动的地方有三个：name=“image” 和两个id

 PreviewImage($("input[name='image']")[0], 'imageid', 'divid');