时间戳

首页 > 解决方案 > 使用拖放选项上传的图像似乎不起作用

javascript - 使用拖放选项上传的图像似乎不起作用

问题描述

在给定的代码中，我允许用户使用按钮或拖放选项上传文件。上传图片后，图片的名称将传递给某个 exif 工具，在该工具中检查 gps 坐标。如果找到 Gps 位置信息，则标记将放置在谷歌地图上的该位置。我的代码适用于使用按钮上传的图像，结果，即提取的地图、缩略图和 Exif 信息在 upload.php 页面上正确显示。但是当我使用拖放上传图像时，结果显示在 index.php 页面上。一旦图像被拖动，我希望它们在 upload.php 上。有人可以看到我在哪里犯错。我知道它的解释很长。提前致谢。

我的代码如下：

上传.php

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
// code for drag and drop
if(is_array($_FILES)) 
{
if(is_uploaded_file($_FILES['fileToUpload']['tmp_name'])) {
$sourcePath = $_FILES['fileToUpload']['tmp_name'];
$target_file = "uploads/".$_FILES['fileToUpload']['name'];
if(move_uploaded_file($sourcePath,$target_file)) {
?>
<img src="<?php echo $target_file; ?>">
<?php
exit();
   }
 }
}
$path = getcwd();
$cmd = exec("exiftool -a -gps:all ".$target_file. " -c %.6f", $result);
// some html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"> </script>
<script>
var Lat="<?php echo $Latitude;?>";
var Lon="<?php echo $Longitude;?>"; 
if(Lat!=""){
    Lat=(Number)(Lat);
    Lon=(Number)(Lon);
}
</script>
</head>
<body >
<div id="map"></div>
<p><b> Thumbnail </b></p>
<div id = "img">
<a target="_blank" href="<?php echo $target_file?>" >
<img src= "<?php echo $target_file?>" alt="Image not found" 
 style="width:150px">
 </a>
</div>
</body>
</html>

索引.js

function initMap() {
var uluru = {lat: Lat, lng: Lon};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 5, center: uluru});
var marker = new google.maps.Marker({position: uluru, map: map});
}
$.ajax({
dataType:"json",
url:'upload.php',
data: "",
success: function(data)
{
  data = JSON.parse(data);
  console.log(data);    
}
}); 

// drag and drop
$(document).ready(function()
{
  $("#drop-area").on('dragenter', function (e){
  e.preventDefault();
  $(this).css('background', '#BBD5B8');
  });
 $("#drop-area").on('dragover', function (e){
 e.preventDefault();
 });

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

 function createFormData(image)
{
 var formImage = new FormData();
 formImage.append('fileToUpload', 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-area').html(data);
 console.log(data);
 }});
 }

索引.php

<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<div id="wrapper">
<div id="drop-area">
<h3 class="drop-text">Drag and Drop Images Here</h3>
</div>
</div>
</body>

标签： javascriptphpjqueryajaxdrag-and-drop

解决方案

从您的评论“从drag.php上传的图像也有$target_file变量。我想访问upload.php中的那个变量，我想将它传递给某个工具”，从我们看到的代码来看，您可能是最好直接在以下位置使用您的工具drag.php：

if(move_uploaded_file($sourcePath,$target_file)) {
  $cmd = exec("exiftool -a -gps:all ".$target_file. " -c %.6f", $result);
  ...

现在，如果您需要它upload.php，正确的答案是您应该只使用upload.php并处理 JavaScript 中的上传或拖放，无论用户如何提供文件，都使用脚本发送$_FILES到（这里是一个很好的起点）。如果它不起作用，我们将需要 HTML/JS 代码以及更多代码来帮助您。upload.phpupload.php

推荐阅读