php实现拖拽_拖拽上传

在PHP中实现拖拽上传功能，主要需要以下几个步骤：

（图片来源网络，侵删）

1、创建HTML表单和div元素，用于显示拖拽区域。

2、使用JavaScript/jQuery监听拖拽事件，并在用户拖拽文件到指定区域时触发上传操作。

3、使用PHP处理上传的文件，将其保存到服务器。

以下是具体的实现代码：

HTML部分：

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/formdata">
    <div id="drop" style="width:200px; height:200px; border:1px solid #aaa;">将文件拖拽到这里</div>
    <input type="file" name="file[]" multiple />
</form>

JavaScript部分：

$(document).ready(function(){
    var dropZone = $("#drop");
    dropZone.on("dragover", function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).css('background', '#e0e0e0');
    });
    dropZone.on("dragleave", function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).css('background', '#fff');
    });
    dropZone.on("drop", function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).css('background', '#fff');
        var files = e.originalEvent.dataTransfer.files;
        handleFileUpload(files);
    });
});
function handleFileUpload(files){
    var formData = new FormData();
    for(var i=0; i<files.length; i++){
        formData.append('file[]', files[i]);
    }
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            alert('上传成功');
        },
        error: function() {
            alert('上传失败');
        }
    });
}

PHP部分（upload.php）：

<?php
if(isset($_FILES['file'])){
    $files = $_FILES['file'];
    for($i=0; $i<count($files['name']); $i++) {
        $filename = $files['name'][$i];
        move_uploaded_file($files['tmp_name'][$i], 'uploads/'.$filename);
    }
}
?>

以上代码实现了一个简单的拖拽上传功能，用户可以将文件拖拽到指定的区域，然后通过AJAX异步上传到服务器。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/671672.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。