Question

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

我的代码适用于已在网络上使用的图片，例如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 ，我输入已上传图片的图片网址，工作正常，但我想上传用户通过文件浏览器选择的图片。

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

上传后显示图片的网址 -

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

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

Answer 2

我说：

您需要阅读来源

将来源添加到变量imgUrl

我的愿景:)：

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
            oFReader.onload = function (oFREvent) {
                var sizef = document.getElementById('uploadImage').files[0].size;
                document.getElementById("uploadPreview").src = oFREvent.target.result;
                document.getElementById("uploadImageValue").value = oFREvent.target.result; 
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var imgUrl = $('#uploadImageValue').val();
                alert(imgUrl);
            });
        });
        </script>
        <div>
            <input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" />
            <img id="uploadPreview" style="width: 150px; height: 150px;" /><br />
            <input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

Answer 3

阅读完websky的回答后。我可以成功上传到Imgur！谢谢:)所以我想总结一下有问题上传图片给Imgur的人

您需要准备base64编码的图像（请阅读websky的答案，看看如何）
使用＆＃34; substr＆＃34;从base64获取数据部分。功能
准备你的ajax并像这样张贴到Imgur

＆＃13;

var base64 = base64.substr(base64.indexOf(",") + 1, base64.length);
$.ajax({ 
      url: 'https://api.imgur.com/3/image',
      type: 'POST',
      datatype: 'json',
      data: {
        'image': base64
      },
      beforeSend:function(xhr){
            xhr.setRequestHeader("Authorization", "Client-ID " + clientId);
      },
      success: function(response){
            console.log(response);
      }
})

＆＃13;

希望这有帮助：）

Answer 4

您应该使用CURL通过imgur api上传图像。它将为您返回JS ENCODED信息。您可以轻松检索那里的URL。

jQuery - 获取图像url / link / path从客户端上传imgur上的图像

4 个答案: