通过AJAX发送图像

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

我的HTML + JS =>http://jsfiddle.net/6pGgn/

我的PHP =>print_r($_POST);

来源

2013-07-09 Patrik van Dendis

使用新的FormData（）并追加fie或将文件转换为base64 – cocco

我很抱歉，但我不明白。你能编辑我的代码吗？非常感谢。 –

我不使用jquery ...你需要使用jquery吗？ – cocco

我不使用jQuery的，所以我加了我XHR2功能只是向你展示它是如何工作的纯JavaScript的新方法。

作为一个二手的处理程序，它具有丰富的启发性，无论如何它都是为现代浏览器设计的。

在我的情况下，使用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文件..再去读ASLO建议使用document.createDocumentFragment();的名单创建

来源

2013-07-09 09:04:24 cocco

Uff。我认为更简单的解决方案是使用jQuery。 –

我不使用jQuery。它很慢。在为现代浏览器编写代码时，它并不是必需的.jquery是旧版浏览器的一种填充，有时会简化代码，但大多数时候它只会减慢所有内容。 – cocco

http://jsperf.com/using-getelementsbytagname-vs-children/2 http://jsperf.com/native-xhr-vs-jquery-ajax/2我添加了xhr2函数 – cocco

通过AJAX发送图像

回答

相关问题