Question

我正在进行拖放图片上传，但是我通过ajax向php发送数据有问题。因为当我发送数据时它返回空数组。哪里可以成问题？

我的html + js =＆gt; http://jsfiddle.net/6pGgn/

我的php =＆gt; print_r($_POST);

Answer 1

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

作为u usedrop处理程序，它非常不相关，无论如何它都是为现代浏览器制作的。

在我的情况下使用console.log记录ajax响应。

<!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();进行列表创建

通过AJAX发送图像

1 个答案: