JavsScript实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器

最新推荐文章于 2021-02-13 07:22:56 发布

渺然萧蔷倾浮云

最新推荐文章于 2021-02-13 07:22:56 发布

阅读量883

点赞数 1

分类专栏： Web设计文章标签：图片路径图片 inputfile input 文件上传

本文链接：https://blog.csdn.net/kingqiji01/article/details/72152483

版权

Web设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器

最近一直在研究网站的技术，在JAVA，JS，PHP等代码中无缝实现图片或者其他上传文件的动态显示，而不需要经过服务器。更多技术交流，可以关注微信公众号：定格网

核心的代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页管理</title>
    <link rel="stylesheet" href="styles/backstage.css">
    <script src="./scripts/jquery.js"></script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data">
    <div class="details" style="border-bottom:1px #1a1a1a solid">
        <h2>上传轮播图片</h2>
        图片预览效果：<br/>
        <img class="img1" id="imgPre1" src="" width="400px" height="260px" style="float:left;display: block;"/>
        <img class="img2" id="imgPre2" src="" width="400px" height="260px" style="float:left;display: block;"/>
        <img class="img3" id="imgPre3" src="" width="400px" height="260px" style="float:left;display: block;"/>

        <br/>
        <div style="clear: both">&nbsp;</div>
        <!--表格-->
        <table class="table" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>图片编号</th>
                <th>图片名称</th>
                <th style="width: 50%">图片路径</th>
                <th>更新时间</th>
                <th style="width: 15%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td></td>
                <td></td>
                <td>

                </td>
                <td>
                    <a href="javascript:;" class="file">设置图片1
                        <input style="border:1px #E0E0E0 solid;" type="file"
                               name="file1" id="upload-file1"
                               accept="image/gif,image/jpeg,image/png,image/jpg">

                    </a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td></td>
                <td></td>
                <td>

                </td>
                <td>
                    <a href="javascript:;" class="file">设置图片2
                        <input style="border:1px #E0E0E0 solid;" type="file"
                               name="file1" id="upload-file2"
                               accept="image/gif,image/jpeg,image/png,image/jpg">

                    </a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
                <td></td>
                <td>

                </td>
                <td>
                    <a href="javascript:;" class="file">设置图片3
                        <input style="border:1px #E0E0E0 solid;" type="file"
                               name="file1" id="upload-file3"
                               accept="image/gif,image/jpeg,image/png,image/jpg">

                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <script>
            $("input[type='file']").change(function () {
                var act = $(document.activeElement).attr("id");
                var file;
                var reader;
                if (act=="upload-file1") {
                    file = this.files[0];
                    if (!/image\/\w+/.test(file.type)) {
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    if (window.FileReader) {
                        reader = new FileReader();
                        reader.readAsDataURL(file);
                        //监听文件读取结束后事件
                        reader.onloadend = function (e) {
                            $(".img1").attr("src", e.target.result);    //e.target.result就是最后的路径地址
                        };
                    }
                }
                if (act=="upload-file2") {
                    file = this.files[0];
                    if (!/image\/\w+/.test(file.type)) {
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    if (window.FileReader) {
                        reader = new FileReader();
                        reader.readAsDataURL(file);
                        //监听文件读取结束后事件
                        reader.onloadend = function (e) {
                            $(".img2").attr("src", e.target.result);    //e.target.result就是最后的路径地址
                        };
                    }
                }
                if(act=="upload-file3") {
                    file = this.files[0];
                    if (!/image\/\w+/.test(file.type)) {
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    if (window.FileReader) {
                        reader = new FileReader();
                        reader.readAsDataURL(file);
                        //监听文件读取结束后事件
                        reader.onloadend = function (e) {
                            $(".img3").attr("src", e.target.result);    //e.target.result就是最后的路径地址
                        };
                    }
                }
            });
        </script>
        <div class="details_operation clearfix">
            <div class="bui_select">
                <input type="submit" value="保&nbsp;&nbsp;存" class="add">
            </div>

        </div>
    </div>
</form>
<form>

</form>
</body>
</html>

当然，这个代码不一定是最优化的，希望能和各位同行和爱好者交流，大家可以关注微信公众号：定格网

如何在服务器上完整读取本地途径，兼容各大浏览器平台，敬请关注微信公众号或扫描下方二维码：

此代码已经完全写完，欢迎留言交流！

渺然萧蔷倾浮云

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavsScript实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器

JavsScript实现不通过后台，JS实时显示上传图片的显示效果，兼容各个版本浏览器
复制链接

扫一扫

专栏目录

JavsScript实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器

实现不通过后台，实时显示上传图片的显示效果，兼容各个版本浏览器

最近一直在研究网站的技术，在JAVA，JS，PHP等代码中无缝实现图片或者其他上传文件的动态显示，而不需要经过服务器。更多技术交流，可以关注微信公众号：定格网

核心的代码如下：

“相关推荐”对你有帮助么？