图片预览

链接地址：https://www.cnblogs.com/wupeiqi/articles/9322297.html

图片预览

 

定制上传按钮：

复制代码
<div
                        style="position: relative;display: inline-block;height: 50px;min- 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; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%; 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; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%; 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; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%; 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; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
            <img style="height: 100%; 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; 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%; 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
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zzw731862651/p/9327613.html