我正在尝试将客户端通过文件浏览器选择的图像上传到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,它可以正常工作,但我想上传用户通过文件浏览器选择的图像。
最佳答案
看到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,他的回答帮助我找到了解决方案。
关于jQuery - 获取图像 url/链接/路径以从客户端上传图像到 imgur,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28602869/