[HTML / XHTML] Exemple de téléchargement de fichier par glisser-déposer

Temps d'écriture : 2017-01-02 18:00:30

Exemple de téléchargement de fichier par glisser-déposer

Ceci est un exemple de code pour télécharger un fichier par glisser-déposer.

Si vous exécutez l'exemple et faites glisser le fichier vers la zone rectangulaire, le fichier est téléchargé au fur et à mesure que le processus avance.

Le fichier upload.php utilisé pour le téléchargement peut être implémenté avec le même code que lors de l'utilisation du formulaire html.

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset=utf-8>  
<meta name="viewport" content="width=620">  
<title>HTML5 Demo: Drag and drop, automatic upload</title>  
<body>  
  
<style>  
#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto;}  
#holder.hover { border: 10px dashed #0c0; }  
#holder img { display: block; margin: 10px auto; }  
  
  
#container { width: 300px; margin: 0px auto;}  
progress { width: 300px; margin: 0px auto; }  
</style>  
<div id="holder">  
</div>  
  
<div id="container">  
<progress id="uploadprogress" min="0" max="100" value="0"/>  
</div>  
  
  
<script>  
var holder = document.getElementById('holder');  
var progress = document.getElementById('uploadprogress');  
  
holder.ondragover = function () { this.className = 'hover'; return false; };  
holder.ondragend = function () { this.className = ''; return false; };  
holder.ondrop = function (e) {  
this.className = '';  
e.preventDefault();  
readfiles(e.dataTransfer.files);  
}  
  
  
function readfiles(files) {  
// 파일 미리보기  
previewfile(files[0]);  
  
var formData = new FormData();  
formData.append('upload', files[0]);  
  
var xhr = new XMLHttpRequest();  
xhr.open('POST', './devnull.php');  
xhr.onload = function() {  
progress.value = 100;  
};  
  
xhr.upload.onprogress = function (event) {  
if (event.lengthComputable) {  
var complete = (event.loaded / event.total * 100 | 0);  
progress.value = progress.innerHTML = complete;  
}  
}  
  
xhr.send(formData);  
}  
  
function previewfile(file) {  
var reader = new FileReader();  
reader.onload = function (event) {  
var image = new Image();  
image.src = event.target.result;  
image.width = 250; // a fake resize  
holder.appendChild(image);  
};  
  
reader.readAsDataURL(file);  
}  
</script>  
</body>  
</html>

upload.php

<?php  
if (isset($_FILES['upload']) && $_FILES['upload']['error'] == 0) {  
if (move_uploaded_file($_FILES['upload']['tmp_name'],  
"업로드 서버경로/{$_FILES['upload']['name']}")) {  
echo "upload 성공!!";  
var_dump($_FILES);  
}else{  
echo "upload fail##1";  
var_dump($_FILES);  
}  
}else{  
echo "upload fail##2";  
var_dump($_FILES);  
}  
?>

URL de référence


[http://html5demos.com/dnd-upload (http://html5demos.com/dnd-upload)

Post précédent
Prochain article
Autres articles dans la catégorie
Récemment écrit