zoukankan      html  css  js  c++  java

  • 图片预览

    定制上传按钮：

    复制代码
    <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
  • 相关阅读:
    SharePoint 2013 中的SQL Server 安全
    SharePoint 2013 的HTML5特性之响应式布局
    SharePoint 2013 一些小技巧
    SharePoint 2013 排错之"Code blocks are not allowed in this file"
    SharePoint 2013 创建搜索中心及搜索设置
    SharePoint 2013 使用PowerShell创建State Service
    SharePoint 2013 内容部署功能简介
    SharePoint 使用PowerShell恢复误删的网站集
    SharePoint 自定义WebPart之间的连接
    linux之misc及使用misc创建字符设备
  • 原文地址：https://www.cnblogs.com/bai-max/p/9355845.html
Copyright © 2011-2022 走看看