上传图片

最新推荐文章于 2023-05-31 16:09:04 发布

原创最新推荐文章于 2023-05-31 16:09:04 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上传图片

本文介绍了一种使用HTML和JavaScript实现文件读取的方法，包括读取图片并预览，读取二进制字符串，以及读取文本信息。通过实例代码展示了如何使用FileReader API进行文件读取，并将结果展示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<p>
        <input type="file" id='file' />
        <input type='button' id="readAsDataURL" value="读取图片" />
        <input type="button" id="readAsArrayBuffer" value="读取二进制字符串" />
        <input type="button" id="readAsText" value="读取文本信息" />
	</p>
    <img src="" width="200" id="myimg">
    <div id="rs"></div>
               


<script>
        window.onload = function() {
                var fil, reader;
                var rs = $('rs');
                var myimg=$('myimg');	
                $("readAsDataURL").onclick = MyRead;  //读取图片
                $("readAsArrayBuffer").onclick = MyRead;  //读取二进制字符串
                $("readAsText").onclick = MyRead;  //读取文本信息

                function MyRead() {
                        file = document.getElementById('file').files[0];
                        reader = new FileReader();
                        switch(this.id) {
                                case "readAsDataURL":
                                        readAsDataURL(file);
                                        break;
                                case "readAsArrayBuffer":
                                        readAsArrayBuffer(file);
                                        break;
                                case "readAsText":
                                        readAsText(file);
                                        break;
                        }

                }

                //预读图片
                function readAsDataURL(_file) {
                        reader.readAsDataURL(file);
                        reader.onload = function(e) {
                                myimg.src = reader.result;
                        };
                }

                //readAsArrayBuffer
                function readAsArrayBuffer(_file) {
                        reader.readAsArrayBuffer(_file);
                        reader.onload = function() {
                                //result.innerHTML = reader.result;
                                var obj = reader.result;
                                console.log(reader)
                                for(var p in reader.result) {
                                        rs.innerHTML += p;
                                }
                        };
                        reader.onloadend = function() {

                                //rs.innerHTML = reader.result;

                        };
                }

                //readAsText
                function readAsText(_file) {
                        reader.readAsText(_file);
                        reader.onload = function(e) {
                                rs.innerHTML = reader.result;
                        };
                }

        }

        function $(_id) {
                return document.getElementById(_id);
        }
</script>
</body>
</html>