用html5和jquery写的一个文件上传的Demo

最新推荐文章于 2024-10-10 13:34:51 发布

Endless-love

最新推荐文章于 2024-10-10 13:34:51 发布

阅读量1.6k

点赞数

分类专栏： html5 jquery 前端关于前端的技术探讨文章标签： html5 jquery

本文链接：https://blog.csdn.net/Stay_Hungry_Stay/article/details/81224851

版权

关于前端的技术探讨同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

用html5和jquery写的一个文件上传的Demo

jquery-3.3.1.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <input id='ipt' style='display: none;' type="file" multiple>
    <button id='btn'>上传</button>
    <script>
        btn.onclick = function(){
            ipt.click();
        }
        ipt.onchange = function(){
            for (var i = 0; i < ipt.files.length; i++) {
                var fr = new FileReader();
                var file = ipt.files[i];
                console.log(file);
                fr.readAsDataURL(file);
                fr.onload = function(){
                    var img = document.createElement('img');
                    img.src=this.result;
                    img.width=300;
                    document.body.appendChild(img);
                    document.body.innerHTML += file.name+' '+ file.lastModifiedDate+' '+ (file.size/1024).toFixed(1)+'kb '+file.type;
                }
            }
        }
        </script>
</body>
</html>

一个小小的案例就完成啦，每天写一点总会成为有进步，至少比昨天更好