图片预览

Posted bai-max

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片预览相关的知识，希望对你有一定的参考价值。

定制上传按钮：

技术分享图片
技术分享图片
<div
                        style="position: relative;display: inline-block;height: 50px;min-width: 300px;overflow: hidden;">
                    <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;">
                        <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                        <span>点击上传文件</span>
                    </div>
                    <input name="customer_excel" type="file" id="excelFile"
                           style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
                </div>


$(function () {
            $(‘#excelFile‘).change(function (e) {
                var fileName = e.currentTarget.files[0].name;
                $(this).prev().find(‘span‘).text(fileName);
            })
        })
技术分享图片
技术分享图片
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
                 src="/static/imgs/default.png">
            <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;" id="avatarImg"
                   name="avatar_img" type="file" class="img-file"/>
        </div>
        <div>点击图片更换(<a href="#">撤销</a>)</div>

        <p>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <input type="text" placeholder="密码">

        </p>
    </form>
</div>
</body>
</html>
技术分享图片

预览

技术分享图片
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
                 src="/static/imgs/default.png">
            <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
                   name="avatar" type="file" class="img-file"/>
        </div>
        <div>点击图片更换(<a href="#">撤销</a>)</div>

        <p>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <input type="text" placeholder="密码">
        </p>
        <input type="submit" value="提交">
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            bindChangeAvatar1();
        });

        function bindChangeAvatar1() {
            $(‘#avatarImg‘).change(function () {
                var file_obj = $(this)[0].files[0];
                var blob = window.URL.createObjectURL(file_obj);
                document.getElementById(‘previewImg‘).src = blob;
                $(‘#previewImg‘).load(function () {
                    window.URL.revokeObjectURL(blob);
                })
            })
        }
    </script>
</div>
</body>
</html>
技术分享图片
技术分享图片
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
                 src="/static/imgs/default.png">
            <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
                   name="avatar" type="file" class="img-file"/>
        </div>
        <div>点击图片更换(<a href="#">撤销</a>)</div>

        <p>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <input type="text" placeholder="密码">
        </p>
        <input type="submit" value="提交">
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            bindChangeAvatar2();
        });

        function bindChangeAvatar2() {
            $(‘#avatarImg‘).change(function () {
                var file_obj = $(this)[0].files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file_obj);
                reader.onload = function (e) {
                    $(‘#previewImg‘)[0].src = this.result;
                };
            })
        }
    </script>
</div>
</body>
</html>
技术分享图片
技术分享图片
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
                 src="/static/imgs/default.png">
            <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
                   name="avatar" type="file" class="img-file"/>
        </div>
        <div>点击图片更换(<a href="#">撤销</a>)</div>

        <p>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <input type="text" placeholder="密码">
        </p>
        <input type="submit" value="提交">
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            bindChangeAvatar3();
        });

        function bindChangeAvatar3() {
            $(‘#avatarImg‘).change(function () {
                var file_obj = $(this)[0].files[0];
                var form = new FormData();
                form.add(‘img_upload‘, file_obj);
                $.ajax({
                    url: ‘‘,
                    data: form,
                    processData: false,  // tell jQuery not to process the data
                    contentType: false,  // tell jQuery not to set contentType
                    success: function (arg) {
                        // 给img标签设置src属性，预览
                    }
                })
            })
        }
    </script>
</div>
</body>
</html>
技术分享图片
技术分享图片
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>

    <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
        <iframe style="display: none;" id="upload_iframe" name="upload_iframe"></iframe>
        <form method="POST" action="上传地址" enctype="multipart/form-data" target="upload_iframe">
            <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
                 src="/static/imgs/default.png">
            <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
                   name="avatar" type="file" class="img-file"/>
        </form>
    </div>
    <div>点击图片更换(<a href="#">撤销</a>)</div>

    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <p>
            <input type="text" placeholder="图片路径">
        </p>
        <p>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <input type="text" placeholder="密码">
        </p>
        <input type="submit" value="提交">
    </form>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            bindChangeAvatar4();
        });

        function bindChangeAvatar4() {
            $(‘#avatarImg‘).change(function () {
                $(this).parent().submit();
                $(‘#upload_iframe‘).load(function () {
                    var iframeContents = this.contentWindow.document.body.innerText;
                    iframeContents = JSON.parse(iframeContents);
                    if (iframeContents.status) {
                        $(‘#previewImg‘).attr(‘src‘, ‘/‘ + iframeContents.data);
                    }
                })

            })
        }
    </script>
</div>
</body>
</html>
技术分享图片

 

参考兼容性：

  • https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  • https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
  • https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

以上是关于图片预览的主要内容，如果未能解决你的问题，请参考以下文章

如何在不使用意图的片段中拍摄和保存图片？

图片预加载

jquery实现上传图片及图片大小验证图片预览效果代码

9行代码实现图片上传和预览(自定义按钮上传)

Swipeview - 显示下一个项目的预览/片段？

9行代码实现图片上传和预览(自定义按钮上传)