我想知道如何进行拖放图像上传。我不了解的是，如何让服务器知道用户何时将图像拖放到某个div或正文中以进行上传？浏览器，例如ff，chrome，safari。谢谢 :)
最佳答案
我可以告诉您，您还没有做很多研究。
简短的答案是，不。没有所有主流浏览器都支持的方法来检测用户何时在客户端窗口中放置图像。
同样，正如Rajat Saxena在评论中指出的那样，您必须通过在drop事件上发送ajax请求来通知服务器文件删除。
HTML5
这是使用HTML5和javascript的drag and drop from desktop to browser
<div id="drop_zone">Drop files here</div>
<output id="list"></output>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
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>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
jQuery查询
这是使用JQuery的drag and drop from desktop to browser(Firefox和Chrome)
function ignoreDrag(e) {
e.originalEvent.stopPropagation();
e.originalEvent.preventDefault();
}
$('#target')
.bind('dragenter', ignoreDrag)
.bind('dragover', ignoreDrag);
.bind('drop', drop);
function drop(e) {
ignoreDrag(e);
var dt = e.originalEvent.dataTransfer;
var files = dt.files;
if(dt.files.length > 0){
var file = dt.files[0];
alert(file.name);
}
}
插件的其他相关链接(未经测试)和问题
关于javascript - 如何检测用户何时在浏览器当前选项卡视口(viewport)中放置图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12325529/