H5选择本地文件夹下图片上传到服务器，并在网页中显示

最新推荐文章于 2024-05-28 13:09:47 发布

sandalphon4869

最新推荐文章于 2024-05-28 13:09:47 发布

阅读量2.4k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/sandalphon4869/article/details/118683688

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

基本
变种

html5
缺点：还要选择

基本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Definition</title>
    <!--[if lt IE 9]>
        <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <article>
        <h2>file</h2>
        <input type="file" id="files" onchange="draw()" webkitdirectory accept="image/*">
    </article>
    <section>
        <canvas id="myCanvas" width=2000 height=5000></canvas>
    </section>
</body>

<script type="text/javascript">
    var imgPosY = 0;
    function draw() {
        // 获取选择到的文件
        var files = document.getElementById("files").files;

        for (var file of files) {
            // console.log(file.webkitRelativePath);   // 显示图片的相对路径

            // 读取文件内容
            var reader = new FileReader();
            reader.readAsDataURL(file);
            // 读完完成onload再执行function
            reader.onload = function () {
                var img = new Image();
                // 图片内容从result获取
                img.src = this.result;
                // 图片读取内容完成后，执行function来添加到画布上
                img.onload = function() {
                    var myCanvas = document.getElementById("myCanvas");
                    var cxt = myCanvas.getContext('2d');
                    console.log(img.height);
                    // (img, 图片左上角在画布的横坐标，~的纵坐标)
                    cxt.drawImage(img, 0, imgPosY);			
                    imgPosY += img.height;		// 采用接着上一张图的纵向排布
                }
            }
        }
    }
</script>

</html>

在这里插入图片描述

变种

选择文件夹：然后其内所有的图片被上传。
<input type="file" id="files" onchange="draw()" webkitdirectory accept="image/*">
选择文件夹内单个图片
<input type="file" id="files" onchange="draw()" accept="image/*">
选择文件夹内某些图片
<input type="file" id="files" onchange="draw()" multiple accept="image/*">

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Definition</title>
    <!--[if lt IE 9]>
        <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <article>
        <h2>file</h2>
        <input type="file" id="files" onchange="draw()" multiple accept="image/*">
    </article>
    <section>
        <canvas id="myCanvas" width=2000 height=5000></canvas>
    </section>
</body>

<script type="text/javascript">
    var imgPosY = 0;
    function draw() {
        // 获取选择到的文件
        var files = document.getElementById("files").files;

        for (var file of files) {
            // console.log(file.webkitRelativePath);   // 显示图片的相对路径

            // 读取文件内容
            var reader = new FileReader();
            reader.readAsDataURL(file);
            // 读完完成onload再执行function
            reader.onload = function () {
                var img = new Image();
                // 图片内容从result获取
                img.src = this.result;
                // 图片读取内容完成后，执行function来添加到画布上
                img.onload = function() {
                    var myCanvas = document.getElementById("myCanvas");
                    var cxt = myCanvas.getContext('2d');
                    console.log(img.height);
                    // (img, 图片左上角在画布的横坐标，~的纵坐标)
                    cxt.drawImage(img, 0, imgPosY);			
                    imgPosY += img.height;		// 采用接着上一张图的纵向排布
                }
            }
        }
    }
</script>

</html>


---

Reference
[Html读取本地文件夹下图片并显示的示例代码](https://blog.csdn.net/lomo_2019/article/details/97938080)

sandalphon4869

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
H5选择本地文件夹下图片上传到服务器，并在网页中显示

文章目录基本变种html5缺点：还要选择基本<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Definition</title> <!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5sh
复制链接

扫一扫