0

我正在做我的拖放图像上传，但我在通过 ajax 将数据发送到 php 时遇到问题。因为当我发送数据时它返回空数组。哪里可能有问题？

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

我的 php =>print_r($_POST);

4

1 回答 1

3

我不使用 jquery，所以我添加了我的 xhr2 函数，只是为了向您展示它是如何在纯 JavaScript 中使用新方法工作的。

当你使用drop处理程序时，它是非常不相关的，无论如何它是为现代浏览器制作的。

在我的例子中，ajax 响应是使用 console.log 记录的。

<!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>

在 Formdata 中，您可以附加其他值

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

当你发送文件时，你需要写

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

ps ..我也建议document.createDocumentFragment();用于创建列表

于 2013-07-09T09:04:24.857 回答