上传图片并进行在线预览

最新推荐文章于 2022-10-02 13:08:46 发布

清风丿自来

最新推荐文章于 2022-10-02 13:08:46 发布

阅读量7.5k

点赞数

本文链接：https://blog.csdn.net/qq_39098813/article/details/81258393

版权

html 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

javaScript

8 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

首先利用input上传图片，但是如果通过$("#showImage").val()获取到的并不是文件的实际路径，不能通过这个src显示图片

需要将此src改为http的格式才能在线预览

html部分代码

<img src="" id="showImage">
                <a id="a-upon">
                    <input type="file" id="inputImage" accept="image/gif, image/jpeg, image/png, image/jpg">点击这里上传
                </a>

js部分

        $("#inputImage").change(function () {
        var objUrl = $(this)[0].files[0];
        //获得一个http格式的url路径
        var windowURL = window.URL;
        //createObjectURL创建一个指向该参数对象(图片)的URL
        var dataURL = windowURL.createObjectURL(objUrl);
        $("#showImage").attr("src",dataURL);

    });