Hej :) robię galerię zdjęć i próbuję dodać funkcjonalność drag&drop za pomocą jQuery. Moje pole działa na dwa sposoby - albo przez kliknięcie w nie i wybranie pliku albo przez przeciągnięcie właśnie. I o ile przy kliknięciu wszystko jest ok, obraz się ładuje i zostaje zapisany w folderze, o tyle przy przeciąganiu nie jest przekazywany. Siedzę nad tym drugi dzień i nadal nie wiem co jest nie tak.
Mój kod JS:
$(function() {
$("html").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$("h1").text("Drag here");
});
$("html").on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.upload-area').on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$("h1").text("Drop");
});
$('.upload-area').on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
$("h1").text("Drop");
});
$('.upload-area').on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
var fd = new FormData();
var file = e.originalEvent.dataTransfer.files;
fd.append('file', file[0]);
uploadData(fd);
$("h1").text("Uploaded a file");
});
// kliknięcie
$("#uploadfile").click(function(){
$("#file").click();
});
// wybrany plik
$("#file").change(function(){
var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file',files);
uploadData(fd);
});
});
// AJAX i ładowanie pliku
function uploadData(formdata){
$.ajax({
url: '',
type: 'post',
data: formdata,
contentType: false,
processData: false,
dataType: 'json',
success: function(response){}
});
}
I jeszcze mój kod php z formularzem i zapisywaniem do folderu
<!doctype html>
<html>
<body>
<?php
if(isset($_POST['upload'])){
// Getting file name
$filename = $_FILES['file']['name'];
// Valid extension
$valid_ext = array('png','jpeg','jpg');
// Location
$location = "images/".$filename;
$thumbnail_location = "images/thumbnail/".$filename;
// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);
$return_arr = array();
// Check extension
if(in_array($file_extension,$valid_ext)){
// Upload file
if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
$src = $location;
}echo "Successfully Uploaded";
}
}
?>
<!-- Upload form -->
<div class = "add-area">
<div class="form-wrapper">
<div class="row">
<div class="col-md-8 offset-md-4" >
<form method='post' action='' enctype='multipart/form-data'>
<div class="form-group">
<label for="title">Tytuł obrazka</label><br />
</div>
<div class="form-group">
<input type="text" name="file_title" class="form-control" placeholder="Tytuł obrazka" >
</div>
<div class="form-group">
<input type='file' name='file' id='file'>
</div>
<div class="form-group">
<div class="upload-area" id="uploadfile">
<h1>Drag and Drop file here<br/>Or<br/>Click to select file</h1>
</div>
</div>
<div class="form-group">
<button type='submit' value='Upload' name='upload'> Dodaj</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>