HTML 接收本地文件

最新推荐文章于 2023-02-21 22:02:04 发布

weixin_30845171

最新推荐文章于 2023-02-21 22:02:04 发布

阅读量339

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dzzy/p/5772002.html

版权

HTML代码请把文件拖到下面的框里
触发drop事件
读取拖放的文件常用情况：
结合XMLHttpRequest和拖放文件实现上传
查看和管理本地文件和图片

<!DOCTYPE HTML> 
<html>
<head> 
    <style type="text/css"> 
        #dropTarget {width: 200px; height: 200px; background: #ccc; border: 1px solid #999;} 
        </style> 
</head> 
<body>
<p>请把文件拖到下面的框里：</p> 
<div id="dropTarget"></div> 
<div id="output"></div> 
<script type="text/javascript"> 
        function dragHandle(event)
            {
                var info = "", outputEle = document.getElementById("output"), 
                files, i, len; event.preventDefault(); 
                if(event.type == "drop")
                {
                    files = event.dataTransfer.files;
                    i = 0;
                    len = files.length; 
                    while(i < len){ 
                        info += files[i].name + "( " + files[i].type + ", " + files[i].size + " bytes) <br>"; i++; 
                    } 
                    outputEle.innerHTML = info; 
                }
            } 
            var dropTargetEle = document.getElementById("dropTarget");
            dropTargetEle.addEventListener("dragenter", dragHandle, false); 
            dropTargetEle.addEventListener("dragover", dragHandle, false); 
            dropTargetEle.addEventListener("drop", dragHandle, false); 
</script> 
</body> 
</html>

转载于:https://www.cnblogs.com/dzzy/p/5772002.html

weixin_30845171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 接收本地文件

HTML代码请把文件拖到下面的框里触发drop事件读取拖放的文件常用情况：结合XMLHttpRequest和拖放文件实现上传查看和管理本地文件和图片<!DOCTYPE HTML> <html><head> <style type="text/css"> #dropTarget {width: 200px...
复制链接

扫一扫