如何实现上传图片并显示图片？

最新推荐文章于 2025-03-26 03:18:09 发布

玖.儿

最新推荐文章于 2025-03-26 03:18:09 发布

阅读量1.5w

点赞数 7

本文链接：https://blog.csdn.net/weixin_44484756/article/details/90268583

版权

如何实现上传图片并显示图片？

平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况，那么你有没有想过这个该如何实现的呢？在以前还没有学到这个知识之前，就觉得好神奇，在网上居然能做到上传图片的效果，而现在自己学到了就觉得就几个步骤而已，所以学到了就觉得蛮简单，并没有我们想象中的那么困难。
如何实现的呢？
以上传员工图片为例：首先要设置一个img标签和一个input标签，而这两个标签是有相连的地方的，img标签是用来设置图片的大小，而input标签隐藏起来，当双击img标签的时候，input标签也执行起来，弹出文件框，选择要上传的图片。

@* ondblclick 为双击事件，onchange是当元素发生改变时触发 *@
<img width="250" height="280" src="" alt="" id="IsImgEmployeePicture" style= "border:1px solid #999;" ondblclick="chooseImageFile('EmployeePicture')"/>
<input type="file" name="fileEmployeeImage" id="EmployeePicture" hidden accept="image/*" onchange="showImgToView('EmployeePicture')"/>

上面的两句代码之间是通过EmployeePicture进行相连的，这样之间就可以关联起来，实现上传图片的方法不只是靠这两句代码就可以了，还有要写点击的方法。
步骤： 1、先打开file文件表单选择图片；2、创建FileReader对象，用正则表达式过滤图片文件；3、利用改变事件将图片显示出来；4、读取文件，将url绑定到img标签的src属性上。
详细： 1、chooseImageFile方法：
在这里插入图片描述
2、创建FileReader对象：

正则表达式过滤图片文件：

regexImageFile=/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

补：FileReader对象允许Web应用程序来异步读取存储在用户计算机上的文件里面的内容，使用File或者Blob对象指定要读取的文件或数据，其中结合input：file可以很方便的读取本地文件里面的内容。

3、利用改变事件将图片显示出来：
在这里插入图片描述
readAsDataURL()方法是FileReader对象里面的方法，其作用为可以获取API异步读取的文件数据，将图片另存为数据Url,还可以实现图片上传预览的效果，让用户确认是否就是上传这张图片，提升用户体验。
4、读取文件
在这里插入图片描述
实现上传图片就这四个步骤，其实就是在FileReader这里是关键的节点，因为FileReader有读取文件的作用，你也可以尝试去上传一下自己的图片。
源码
注意：在这里需要引用一个jQuery插件才能使用


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>上传图片</title>
</head>
<body>
    <div> 
        @* ondblclick 为双击事件，onchange是当元素发生改变时触发 *@
        <img src="" alt="" id="IsImgEmployeePicture" style="border:1px solid #999;display: block;width: 300px;height: 300px;" onclick="chooseImageFile('EmployeePicture')" />
        <input type="file" name="fileEmployeeImage" id="EmployeePicture" hidden accept="image/*" onchange="showImgToView('EmployeePicture')" />
    </div>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>

        //1、单击调用chooseImageFile方法
        function chooseImageFile(inputFileID) {
            $("#" + inputFileID).click();   //模拟点击EmployeePicture（input）,出发showImgToView()方法
        }

        //2、创建FileReader对象
        var fileReader = new FileReader();
        //正在判断是否符合图片类型
        regexImageFile = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        //3、利用改变事件将图片显示出来
        function showImgToView(inputFileId) {
            //选择图片文件
            var imgFile = $("#" + inputFileId).get(0).files[0];
            //判断上传文件是否为图片格式
            if (!regexImageFile.test(imgFile.type)) {
                return;
            } else {
                //将文件读取为DataURL
                fileReader.readAsDataURL(imgFile);
            }
        }

        //4、读取文件
        fileReader.onload = function (evt) {
            //将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果
            $("#IsImgEmployeePicture").attr("src", evt.target.result);
        }

    </script>
</body>
</html>