在没有上传服务器端的情况下看到上传图片的效果图window.createObjectURL

2024年5月4日 65次阅读 来源: 一帆的粑粑

前端的代码如下

<div class="col-sm-9">
    <input type="hidden" name="checkpic" id="checkpic" value="/data/upload/2017-03-31/58de2a48105a1.jpg">
    <input type="hidden" name="oldcheckpic" id="oldcheckpic" value="nopic">
    <input type="hidden" name="oldcheckpicname" id="oldcheckpic" value="/data/upload/2017-03-31/58de2a48105a1.jpg">
    <a href="javascript:;" class="file" title="点击选择所要上传的图片">
        <input type="file" name="file0" id="file0" multiple="multiple">
        选择上传文件
    </a>
    &nbsp;&nbsp;<a href="javascript:;" onclick="return backpic('/data/upload/2017-03-31/58de2a48105a1.jpg');" title="还原修改前的图片" class="file">
        撤销上传
    </a>
    <div><img src="/data/upload/2017-03-31/58de2a48105a1.jpg" height="70" id="img0"></div>
</div>

jquery

$("#file0").change(function () {
    var objUrl = getObjectURL(this.files[0]);
    console.log("objUrl = " + objUrl);
    if (objUrl) {
        $("#img0").attr("src", objUrl);
    }
});

当点击上传图片时id=”img0″的图片地址变成了

<div>
    <img src="blob:http://www.test.com/b2e75842-608c-4298-932e-4e922bd72d10" height="70" id="img0">
</div>

这样就实现了前端图片上传，在没有上传到服务器端的情况下看到上传图片的功能，具体URL.createObjectURL()的参考，请查看https://developer.mozilla.org…。

    原文作者：一帆的粑粑
    原文地址: https://segmentfault.com/a/1190000009549929
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞