1

以下代码来自专门用于在imgur.com上上传图像的页面。这是一个来自网络的模型，你可以从你的电脑上拖放图像而没有任何问题。我的问题是：我需要添加什么代码才能从另一个浏览器拖放图像？

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Upload</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>.

    <style>
    body {text-align: center; padding-top: 100px;}
    div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
    #link, p , div {display: none}
    div {display: inline-block;}
    .uploading div {display: none}
    .uploaded div {display: none}
    .uploading p {display: inline}
    .uploaded #link {display: inline}
    </style>

<script>
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {

    if (!file || !file.type.match(/image.*/)) return;

    document.body.className = "uploading";

    var fd = new FormData();
    fd.append("image", file);
    fd.append("key", "myapicode");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://api.imgur.com/2/upload.json");
    xhr.onload = function() {

    document.querySelector("#link").href = JSON.parse(xhr.responseText).upload.links.imgur_page;

    var test = JSON.parse(xhr.responseText).upload.links.imgur_page;

    var dataString = 'content=' + test + '&page=something';
    $.ajax({
    type: "POST",
    url: "upload.img.php",
    data: dataString,
    cache: false,
    success: function(html){
    }
    });
    document.body.className = "uploaded";
    }
    xhr.send(fd);
}
</script>

</head>
<body>

<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<input style="visibility:collapse;width:0px;" type="file" onchange="upload(this.files[0])">
<p>Uploading...</p>
<a id="link">Its online!!!</a>

</body>
</html>
4

1 回答 1

1

并非所有浏览器都支持这一点，但 Firefox 允许您将图像从浏览器拖到另一个浏览器或您的计算机上，而 Chrome 不允许您将图像拖出浏览器。

这个页面有一个所谓的 dropzone，在 Chrome 中打开它并在 Firefox 中打开一个图像，您可以将图像直接从 Firefox 拖到 Chrome，但是它似乎无法反过来工作。

脚本注释很好，应该会给你一些想法，拖放的东西基本上是这样设置的：

var dropzone;  
    dropzone = document.getElementById("dropzone");  
    dropzone.addEventListener("dragenter", dragin, false);
    dropzone.addEventListener("dragleave", dragout, false);
    dropzone.addEventListener("dragover", stopPropagation, false);
    dropzone.addEventListener("drop", drop, false);

其中dragin,dragout等drop是对您将在脚本中找到的那些事件调用的函数。

于 2012-08-20T17:52:29.693 回答