HTML5+JS获取上传图片信息 - JavaScript宝典

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="file" id="file1" name="filelist"  />
        </form>
         
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script>
            function checkFile(param){
                var param = param.data;
                var file = this.files[0];
                var reader = new FileReader();
                // show表示<div id='show'></div>，用来展示图片预览的
                if(!/image\/\w+/.test(file.type)){
                        alert("请确保文件为图像类型");
                        return false;
                }
                var result = {};
                result.name = file.name;
                result.size = file.size;
                // onload是异步操作
                reader.onload = function(e){
                    result.src = e.target.result;
                    var img = new Image();
                    img.src = e.target.result;
                    result.width = img.width;
                    result.height = img.height;
                    param.callback(result);
                }
                reader.readAsDataURL(file);    
            }
            $('#file1').on('change',{"callback":callback},checkFile);
            function callback(result){
                document.write(JSON.stringify(result));
            }
            
        </script>
    </body>
</html>