HTML 接收本地文件

时间：2023-03-08 18:06:57

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>

相关文章