jQuery - 获取图像 url/链接/路径以从客户端上传图像到 imgur

Question

我正在尝试将客户端通过文件浏览器选择的图像上传到imgur.com，但问题是如何获取将图像上传到imgur的url，因为我们需要上传图像的url。

我的代码可以很好地与网络上已有的图像配合使用，例如 http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png

这是 CSS 代码 -

<input id="filebrow" type="file" accept="image/*" style="visibility:hidden" />

这是通过按钮触发的 jQuery 代码 -

$('#filebrow').change(function(event) {
    var clientId = "CLIENT ID HERE";
    var imgUrl = "";//HOW to get url of selected file here??           
    $.ajax({
    url: "https://api.imgur.com/3/upload",
    type: "POST",
    datatype: "json",
    data: {image: imgUrl},
    success: fdone,
    error: function(){alert("failed")},
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Client-ID " + clientId);
    }
});
});

function fdone(dataa)//called on ajax success 
{
     alert("Link :"+dataa.data.link);
}

如果在 var imgUrl 中输入已上传图像的图像 URL，它可以正常工作，但我想上传用户通过文件浏览器选择的图像。

Answer 1

看到websky的答案后我做了一些研究并找到了答案。他错过了分隔网址的一行。所以这里是我使用的并且有效的简化代码:-

$('#filebrow').change(function() {
   var reader = new FileReader();
   reader.onload = function(e) {
   //this next line separates url from data
   var iurl = e.target.result.substr(e.target.result.indexOf(",") + 1, e.target.result.length);
   var clientId = "CLIENT ID HERE";               
   $.ajax({
    url: "https://api.imgur.com/3/upload",
    type: "POST",
    datatype: "json",
    data: {
    'image': iurl,
    'type': 'base64'
    },
    success: fdone,//calling function which displays url
    error: function(){alert("failed")},
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Client-ID " + clientId);
    }
});
};
 reader.readAsDataURL(this.files[0]);
});

上传后显示图像的 URL -

function fdone(data) //this function is called on success from ajax
{
   alert(data.data.link);     
}

感谢 websky，他的回答帮助我找到了解决方案。