在沒有上傳伺服器端的情況下看到上傳圖片的效果圖window.createObjectURL

一帆的粑粑發表於2019-02-16
伺服器Object

前端的程式碼如下

<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…。

相關文章