原生JS加jQuery实现拖拽和单击上传文件

作者：System 时间：2024年08月10日分类：所有,jquery 字数：1999




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽和单击上传文件</title>
    <style>
        #drop_area {
            width: 300px;
            height: 200px;
            border: 2px dashed #aaa;
            text-align: center;
            padding: 50px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        #fake_input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>
<body>
 
<div id="drop_area">
    <form id="form" action="upload.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="dir" value="image">
        <input type="file" id="fake_input" name="file1" multiple>
    </form>
    将文件拖拽到此处上传<br>
    或<br>
    点击这里选择文件
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        var $dropArea = $('#drop_area');
 
        $dropArea.on('dragenter dragover', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border-color', 'green');
        });
 
        $dropArea.on('dragleave', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border-color', '#aaa');
        });
 
        $dropArea.on('drop', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border-color', '#aaa');
 
            var files = e.originalEvent.dataTransfer.files;
            if (files.length) {
                $('#form').submit();
            }
        });
 
        $('#fake_input').on('change', function () {
            $('#form').submit();
        });
    });
</script>
 
</body>
</html>

这段代码使用jQuery为一个div元素添加了拖拽上传文件的功能。当用户拖拽文件到div上时，会有视觉反馈，并在释放鼠标按钮时触发表单提交。同时，也可以通过点击div并选择文件来上传。这个例子简单明了，并且易于理解和应用。

原生JS加jQuery实现拖拽和单击上传文件

评论已关闭

推荐阅读