Как загружать файлы на сервер через ajax drag and drop?

Question

[lue merg]

необходимо сделать на сайт загрузку файлов ajax хотелось бы сделать drag and drop т.к во первых не умею а во вторых это удобно. но проблема у меня выдает ошибку я уже не знаю что делать уже пол часа голову мучаю нечего придумать не могу
html

<form action="ui/ui-upload/upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload" >
	<div id="dropZone">
		<div class="drag-and-drop" onclick="$(this).next().click();">
			<div class="upload-icon">
			</div>
		</div>
		<input name="filename" type="file">
	</div>
</form>

jquery

$(document).ready(function(){
	var dropZone = $('#dropZone');
	maxFileSize = 1000000;
});

$('#dropZone').on('drop', function(event){
        event.preventDefault();
    	$(this).removeClass('hover');
    	$(this).addClass('drop');
});

var file = event.dataTransfer.files[0];

if (file.size > maxFileSize) {
	$('#dropZone').text('Файл слишком большой!');
	$('#dropZone').addClass('error');
};     

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', uploadProgress, false);
xhr.onreadystatechange = stateChange;
xhr.open('POST', '/upload.php');
xhr.setRequestHeader('X-FILE-NAME', file.name);
xhr.send(file);

выдает ошибку Cannot read property 'dataTransfer' of undefined

Answer 1

[lue merg]

и вот решение выложу на всякий случай если кому то будет интересно

$(document).ready(function() {
    
	var dropZone = $('#dropZone'),
	maxFileSize = 2000000; 
    
	if (typeof(window.FileReader) == 'undefined') {
		dropZone.text('Не поддерживается браузером!');
        	dropZone.addClass('error');
    	};
    
    	dropZone[0].ondragover = function() {
        	dropZone.addClass('hover');
        	return false;
    	};
    
    	dropZone[0].ondragleave = function() {
        	dropZone.removeClass('hover');
        	return false;
    	};
    
    	dropZone[0].ondrop = function(event) {
        	event.preventDefault();
        	dropZone.removeClass('hover');
        	dropZone.addClass('drop');
        
        var file = event.dataTransfer.files[0];
        
        if (file.size > maxFileSize) {
        	dropZone.text('Файл слишком большой!');
        	dropZone.addClass('error');
        	return false;
        };
        
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', uploadProgress, false);
        xhr.onreadystatechange = stateChange;
        xhr.open('POST', 'ui/ui-upload/upload.php');
	xhr.setRequestHeader('X-FILE-NAME', 'file.name');
        var fd = new FormData
	fd.append("file", file)
	xhr.send(fd)
    };
    
    	function uploadProgress(event) {
        	var percent = parseInt(event.loaded / event.total * 100);
    	};
    
	function stateChange(event) {
        	if (event.target.readyState == 4) {
            		if (event.target.status == 200) {
                		
            		} else {
                		dropZone.text('Произошла ошибка!');
                		dropZone.addClass('error');
        		};
        	};
    	};
});

Answer 2

[Виталий Инчин ☢]

var file = event.dataTransfer.files[0];

Строка находится вне события => event = undifined => серьезно час?
И почему-то все вне $(document).ready!

Должно быть, как я понимаю:

$(document).ready(function(){
  var dropZone = $('#dropZone'),
  maxFileSize = 1000000;

$('#dropZone').on('drop', function(event){
        event.preventDefault();
    	$(this).removeClass('hover');
    	$(this).addClass('drop');

        var file = event.dataTransfer.files[0];

       if (file.size > maxFileSize) {
            $('#dropZone').text('Файл слишком большой!');
            $('#dropZone').addClass('error');
       }     

       var xhr = new XMLHttpRequest();
       xhr.upload.addEventListener('progress', uploadProgress, false); 
      xhr.onreadystatechange = stateChange; 
      xhr.open('POST', '/upload.php');
      xhr.setRequestHeader('X-FILE-NAME', file.name);
      xhr.send(file);
});
});

P.s: WTF? Зачем писать

if(){};
//и
xhr.upload.addEventListener

Comments

[lue merg]

Uncaught TypeError: Cannot read property 'files' of undefined

[lue merg]

это там где после .dataTransfer

[Виталий Инчин ☢]

luemerg: Значит у объекта события нету свойства dataTransfer.

[Виталий Инчин ☢]

luemerg: А вообще вот: professorweb.ru/my/javascript/jquery/level4/4_12.php

[lue merg]

Виталий Инчин: очеееень глупый вопрос как дать это свойство

[Виталий Инчин ☢]

luemerg: вообще, странно, что его нет - может быть, JQuery чудит, может быть, браузер не поддерживает. В общем, лучше юзайте готовый плагин под это дело.

[lue merg]

Виталий Инчин: спасибо

[lue merg]

Виталий Инчин: так раз вы мне начали помогать так давайте до конца проблему я решил теперь у меня все работает но картинка не появляется негде так что будьте добры мне подсказать php код

[lue merg]

Виталий Инчин: либо изза чего это может происходить

[Виталий Инчин ☢]

luemerg: Читайте про загрузку файлов через Ajax. Основное тут: https://learn.javascript.ru/xhr-forms#post-с-multi...