duanliaoyin3171
2012-08-20 17:40
浏览 80

从另一个浏览器拖放图像imgur api?

The following code is from a page that is dedicated exclusively for uploading images on imgur.com. This is a model from the net and you can drag and drop images from your pc whit no problems. My question is: What code i need to add so that i can drag and drop images from another browser?

    <!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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dsp1836 2012-08-20 17:52
    已采纳

    Not all browsers support this, but Firefox will let you drag an image out of the browser to another browser or your computer, while Chrome does not allow you to drag an image out of the browser.

    This page has a so called dropzone, open it in Chrome and open an image in Firefox, and you can drag the image straight from Firefox to Chrome, however it does not seem to work the other way around.

    The script is well commented and should give you some ideas, and the drag and drop stuff is basically set up like :

    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);  
    

    Where dragin, dragout, drop etc. are functions called on those events that you will find in the script.

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题