input上传图片

最新推荐文章于 2024-01-21 05:15:00 发布

automation13

最新推荐文章于 2024-01-21 05:15:00 发布

阅读量2.2k

点赞数 1

分类专栏： Web前端文章标签： Blob ReadFile 上传文件

Web前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1、上传图片

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>

        function handleFile1(inputDom) {
            var file = inputDom.files[0];
            // createObjectURL传入File类型的数据创建url，可以在浏览器看到网络请求
            var ObjectURL = URL.createObjectURL(file);
            var img1  = document.querySelector('.img1');
            img1.src = ObjectURL;
            img1.onload = function(img) {
                URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象##
            }
        }
        
        function handleFile2(inputDom) {
            var file = inputDom.files[0];
            // readAsDataURL读取文件，直接返回url，可以在浏览器看到网络请求
            var img2  = document.querySelector('.img2');
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function(e) {
                console.log(e.target.result);  // 上传的图片的编码，如果要传给服务器传的就是这个
                img2.src = e.target.result;
            }

        }
    
        function handleFile3(inputDom) {
            var file = inputDom.files[0];
            // 创建Blob
            var img3  = document.querySelector('.img3');
            var fileReader3 = new FileReader();
            fileReader3.readAsDataURL(file);
            fileReader3.onload = function(e) {
                var dataUrl = e.target.result; // base64编码的dataURL类型数据
                var index = dataUrl.indexOf(',');

                // 获取MIME类型
                var mimeContainer = dataUrl.substr(0, index);
                var mime = mimeContainer.match(/:(image\/[a-z]+);base64/)[1];

                // 创建Blob，atob：对 base64 编码过的字符串进行解码。
                var data = atob(dataUrl.substr(index + 1));
                var dataLength = data.length;
                var u8arr = new Uint8Array(dataLength);
                while(dataLength--){
                    u8arr[dataLength] = data.charCodeAt(dataLength); // 转成Unicode编码后存储
                }

                var blob = new Blob([u8arr], {type:mime});

                // 获取objectURL
                var objectURL = URL.createObjectURL(blob);
                console.log(objectURL);
                img3.src = objectURL;
            }
        }
    </script>
</head>

<body>
    <div style="color:red; padding-bottom:20px">上传图片的3种方法</div>
    <img style="width:200px;height:200px" class='img1' alt="handleFile1" />
    <input type="file" accept="image/*" onchange="handleFile1(this)" />
    <br />
    <img style="width:200px;height:200px" class='img2' alt="handleFile1" >
    <input type="file" accept="image/*" onchange="handleFile2(this)" />
    <br/>
    <img style="width:200px;height:200px" class='img3' alt="handleFile1" >
    <input type="file" accept="image/*" onchange="handleFile3(this)" />
</body>

</html>

参考：

1、https://segmentfault.com/a/1190000011563430 （专栏 -> 老干部的大前端）

2、https://blog.csdn.net/xingyun89114/article/details/80699527

2、JavaScript用btoa和atob来编码解码Base64

btoa和atob是window对象的两个函数，其中btoa是binary to ascii，用于将binary的数据用ascii码表示，即Base64的编码过程，而atob则是ascii to binary，用于将ascii码解析成binary数据，看一个例子：

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

但是，atob和btoa不能编码Unicode字符：

var string = "Hello, 中国！";
window.btoa(string); // 这个会报error

解决方案：先将带有非Latin1字符的串先用encodeURIComponent编码：

var string = "Hello, 中国！";
//"SGVsbG8lMkMlMjAlRTQlQjglQUQlRTUlOUIlQkQlRUYlQkMlODE="
var encodedString = btoa(encodeURIComponent(string));
var decodedString = decodeURIComponent(atob(encodedString));
console.log(decodedString); //"Hello, 中国！"

参考：

1、https://my.oschina.net/itblog/blog/1613977

2、https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa

3、https://blog.coding.net/blog/resolve-atob-decode-chinese-character-outputting-messy-code-problem-in-javascript

4、https://www.jb51.net/article/108957.htm

5、https://blog.csdn.net/xichenguan/article/details/51234093

6、https://www.cnblogs.com/fangsmile/p/7736788.html （DataURL与File,Blob,canvas对象之间的互相转换的Javascript）

7、https://blog.csdn.net/charleslei/article/details/50993861（字符编码笔记：ASCII、Unicode、UTF-8 和 Base64）

automation13

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
input上传图片

1、上传图片<head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile1(inputDom) { var file = inputDom.files[0]; ...
复制链接

扫一扫