How to know the size of the image to be uploaded with javascript?_问答_开发者

How to know the size of the image to be uploaded with javascript?

开发者 https://www.devze.com 2023-01-24 07:01 出处：网络

相关专题：javascript

There is a webp开发者_运维问答age on my website where user can upload pictures. I want to set the limit of the pictures to be uploaded upto 2mb. Currently it uploads image of all sizes. If the picture is less than 2mb it will go along the normal path and get uploaded and if it is greater than 2mb a pop up should show error message. Can anybody help me in how to do this with javascript alone? Any help would be appreciated. Thanks!

You can use the new File API (yes, really) on browsers that support it, which is basically anything except IE9 and earlier. This sort of thing is also possible via Flash on browsers that have flash installed, so you can have a cascade of checks (Does the browser support the File API? Yes, use it; no, does it have Flash? Yes, use it; no...). Note that regardless of what you do on the client side, you must also enforce the limit on the server, because you can't count on any client-side validation, ever.

Re the File API, it's the size property on the entry for the file in the file input's files collection. Here's how you'd check to see if the File API is supported and use it to get the file size on a suitably-equipped browser:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Size</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>

    function showFileSize() {
        var input, file;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('filename');
        if (!input) {
            write("Um, couldn't find the filename element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Show Size'");
        }
        else {
            file = input.files[0];
            write("The size of file '" + file.name + "' is " + file.size + " bytes");
        }

        function write(msg) {
            var p = document.createElement('p');
            p.innerHTML = msg;
            document.body.appendChild(p);
        }
    }

</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='filename'>
<input type='button' id='btnShowSize' value='Show Size' onclick='showFileSize();'>
</form>
</body>
</html>

(That's adapted from my answer to this other question here on StackOverflow about image dimensions.)

Again, though, you can't count on this or any other client-side validation. You must also enforce the limit server-side.