Question

我有一个按钮onClick，其中一个对话框打开，用于浏览和选择文件或在对话框区域上拖放文件。目前我将整个窗口作为放置区域。如何将模态区域设为放下区域。

if (window.File && window.FileList) {
  var dropArea = document.body; //This area i need to change..
  dropArea.addEventListener("dragover", dragHandler);
  dropArea.addEventListener("drop", filesDroped);
}

Answer 1

这种上传图片的方法是通过ajax，php和javascript。此方法包含两个文件 index.html 和 upload.php 。此外，您需要创建一个需要上传图片的文件夹，对我来说，我创建了一个图片文件夹。此文件夹路径将包含在upload.php中。我希望这对你有所帮助。

的index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <div id="wrapper" class="wrapper">
        <div id="drop-container" class="drop-container">
            <h3 class="drop-label">DRAG AND DROP IMAGE HERE</h3>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
$(document).ready(function() {
    $("#drop-container").on('dragenter', function(e) {
        e.preventDefault();
        $(this).css('background', '#fff');
    });

    $("#drop-container").on('dragover', function(e) {
        e.preventDefault();
    });

    $("#drop-container").on('drop', function(e) {
        $(this).css('background', '#fff');
        e.preventDefault();
        var image = e.originalEvent.dataTransfer.files;
        createFormData(image);
    });
});

function createFormData(image) {
    var formImage = new FormData();
    formImage.append('userImage', image[0]);
    uploadFormData(formImage);
}

function uploadFormData(formData) {
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            $('#drop-container').html(data);
        }
    });
}
</script>
<style type="text/css">
body {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    background-color: #ccc;
}

.wrapper {
    text-align: center;
    margin-top: 0 auto;
    padding: 0px;
    width: 995px;
}

.drop-container {
    margin-top: 20px;
    margin-left: 220px;
    width: 600px;
    height: 300px;
    background-color: white;
    border: 1px solid grey;
}

.drop-label {
    margin-top: 120px;
    color: grey;
    font-size: 25px;
    font-weight: bold;
}
.drop-container img {
    max-width: 200px;
}
</style>

upload.php的

<?php
if(is_array($_FILES)) 
{
 if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
  $sourcePath = $_FILES['userImage']['tmp_name'];
  $targetPath = "images/".$_FILES['userImage']['name'];

  //$query=" " //Query to insert to database here.

  if(move_uploaded_file($sourcePath,$targetPath)) {
  ?>
   <img src="<?php echo $targetPath; ?>">
   <?php
   exit();
  }
 }
}
?>

我正在实现文件拖放功能

1 个答案: