HTML-点击Div读取本地文件内容

最新推荐文章于 2022-10-24 17:19:19 发布

bajundong6738

最新推荐文章于 2022-10-24 17:19:19 发布

阅读量356

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/abnk/p/11482981.html

版权

<!DOCTYPE html>
<html>
<div id="container"  onclick="choosefile();">
    <div style="text-align:center">Drag and drop files here to upload.</div>
    <input type="file" id="file0" style="display: none" onchange="selectedFile();">
</div>
</html>


<style type="text/css">
#container{
    min-width: 400px;
    min-height: 280px;
    border: 2px dotted #000;
    -moz-border-radius: 8px;
    background-color:yellow;
}
</style>


<script type="text/javascript">
function choosefile() {
       var f = document.getElementById("file0");
       f.click();//因为被隐藏了，所以用一个函数调用模仿手动点击事件
}

function selectedFile(){
    if(1){
        var selectedFile = document.getElementById('file0').files[0];
        var name = selectedFile.name;//读取选中文件的文件名
        var size = selectedFile.size;//读取选中文件的大小
        console.log("文件名:"+name+"大小:"+size);
    
        var reader = new FileReader();//这是核心,读取操作就是由它完成.
        reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
        reader.onload = function () {
            //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
            console.log(this.result);
        }
    }
}

</script>

转载于:https://www.cnblogs.com/abnk/p/11482981.html

bajundong6738

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-点击Div读取本地文件内容

<!DOCTYPE html><html><div id="container" onclick="choosefile();"> <div style="text-align:center">Drag and drop files here to upload.</div> <input...
复制链接

扫一扫