图片上传预览

已于 2022-02-02 21:14:20 修改
阅读量107 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html jquery 前端 javascript
于 2022-02-02 21:11:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syfeng0725af/article/details/122772050
本文详细介绍了四种在网页中实现文件上传和图片预览的方法，包括利用File API、FileReader、FormData和异步上传。通过实例展示了如何在用户选择文件后实时预览，并提供了兼容性参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上传

文件按钮

<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;background-color: #333333;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
</div>

<script>
    $(function () {
        $('#excelFile').change(function (e) {
            var fileName = e.currentTarget.files[0].name;
            $(this).prev().find('span').text(fileName);
        })
    })
</script>

图片按钮

<!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
classMeta
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值