URL.createObjectURL方法的使用

Posted on Edited on In Views: Disqus:

 

由於我為了要解決「使用者在上傳圖片前先檢查長跟寬」問題，

所以輾轉得知可以利用URL.createObjectURL方法來達成目地，

URL.createObjectURL()是一個靜態方法，用來將 File物件 或是 Blob物件，

變成一個帶有URL的 DOMString 以代表參數中所傳入的物件。

 

URL.createObjectURL方法的使用很簡單，就是一個方法的使用而已，

請參考以下範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <input type="file" id="selectFile">

    <script>
        document.getElementById("selectFile").addEventListener("change", function myfunction() {
            var selectFile = document.getElementById("selectFile").files[0];

            var url = URL.createObjectURL(selectFile);
            var img = new Image();
            img.src = url;

            img.onload = function () {
                console.log("width=" + img.width);
                console.log("height=" + img.height);
            };

            img.onerror = function () {
                alert("not a valid file: " + selectFile.type);
            };
        });
    </script>

</body>
</html>

 

參考資料：

URL.createObjectURL()

HTML5筆記–Object URL