В данном коде я разрешаю пользователю загружать файл с помощью кнопки или опции перетаскивания.Как только изображение загружено, имя изображения передается некоторому инструменту exif, где оно проверяется на наличие координат GPS.Если информация о местоположении GPS обнаружена, маркер будет размещен в этом месте на картах Google.Мой код отлично работает с изображением, загруженным с помощью кнопки, и результаты, т. Е. Карта, миниатюра и извлеченная информация Exif, отображаются правильно на странице upload.php.Но когда я загружаю изображение с помощью перетаскивания, результаты отображаются на странице index.php.Я хочу их на upload.php, как только изображение будет перетащено.Может кто-нибудь увидеть, где я делаю ошибку.Я знаю, это действительно длинное объяснение.Заранее спасибо.
Мой код выглядит следующим образом:
upload.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>
Index.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);
}});
}
Index.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>