CODEWITHSUNDEEP
javascriptajaxdrag-and-drop
Patrik Dendis
Patrik Dendis

Reputation: 313

Send images over AJAX

I am doing on my drag and drop images upload, but I have a problem with sendings data to php over ajax. Because when I send data it return empty array. Where can be a problem?

My html+js => http://jsfiddle.net/6pGgn/

My php => print_r($_POST);

Upvotes: 0

Views: 324

Answers (1)

cocco
cocco

Reputation: 16706

i don't use jquery so i added my xhr2 function just to show you how it works in pure javascript with the new methods.

as u usedrop handler it's prolly irrilevant and in any case it's made for modern browsers.

the ajax response is logged using console.log in my case.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#drop{
 width:150px;height:150px;
 background-color:pink;
}
</style>
</head>
<script>
var x=function(a,b,e,d,c){c=new XMLHttpRequest;c.open((e?e:'get'),a);c.onload=b;c.send((d?d:null))},//url,func,method,formdata
handleFileSelect=function(evt){
 evt.stopPropagation();
 evt.preventDefault();
 var files = evt.dataTransfer.files; // FileList object.

 var fd=new FormData();

 var output = [];
 for (var i = 0, f; f = files[i]; i++) {

  fd.append('file[]',f);

  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
  f.size, ' bytes, last modified: ',
  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
  '</li>');
 }
 x('http://localhost/zoznamka/user/upload/',function(){console.log(this.response)},'post',fd);
 document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
},
handleDragOver=function(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
};
window.onload=function(){
var dropZone = document.getElementById('drop');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
}
</script>
<body>
<div id="drop"></div>
<div id="list"></div>
</body>
</html>

in the Formdata u can append other values

fd.append('myvar','myval');

and as u send files you need to write 

<?php
print_r($_POST);
print_r($_FILES);
?>

ps.. iwould aslo suggest to use document.createDocumentFragment(); for the list creation

Upvotes: 3

Related Questions