前端页面文件拖拽上传模块js代码示例

前端页面文件拖拽上传模块是一种比较常见的交互方式，能够让用户通过将本地文件拖拽上传到页面而不必使用传统的文件选择框。下面我们将为大家介绍一份完整的前端页面文件拖拽上传模块js代码示例。

常见的前端拖拽上传模块

前端拖拽上传模块比较常见的有两种方式：

方式1：使用JS原生API实现

使用JS原生API实现文件的拖拽上传，步骤如下：

1. 通过getElementById获取页面中的DOM元素，绑定ondragover事件。
2. 防止浏览器默认行为，使用e.preventDefault()。
3. 获取上传文件的File对象，使用e.dataTransfer.files。
4. 发送Ajax请求实现上传文件。

下面是一个示例代码：

var target = document.getElementById('uploadBox');
target.addEventListener('dragover', function(e) {
    e.preventDefault();
}, false);

target.addEventListener('drop', function(e) {
    e.preventDefault();
    var formData = new FormData();
    var files = e.dataTransfer.files;
    formData.append('file', files[0]);

    // 发送Ajax请求，上传文件
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/uploadFile', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            console.log('Upload success');
        }
    };
    xhr.send(formData);
}, false);

方式2：使用第三方插件实现

使用第三方插件可以更方便地实现文件的拖拽上传，例如HTML5的FileAPI和jQuery的File Upload插件等。下面是一个使用File Upload插件实现的示例代码：

<input id="fileupload" type="file" name="files[]" multiple>
<div id="dropbox">Drop files here</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/js/vendor/jquery.ui.widget.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/js/jquery.iframe-transport.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/js/jquery.fileupload.min.js"></script>

<script>
    $('#fileupload').fileupload({
        url: '/uploadFile',
        dropZone: $('#dropbox'),
        dataType: 'json',
        done: function (e, data) {
            console.log('Upload success');
        }
    });
</script>

使用第三方插件需要先引入对应的JS文件，具体使用方法可以查看插件官方文档。“dropZone”表示拖拽上传的区域，“url”表示上传文件的地址，“dataType”表示上传文件的类型。其中，“done”表示上传成功后的回调函数。

以上是两个实现前端文件拖拽上传的示例，希望对你有帮助。