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

【问题标题】：jQuery - Getting Image url/link/path to upload image on imgur from client sidejQuery - 从客户端获取图像 url/链接/路径以在 imgur 上上传图像
【发布时间】：2015-04-20 14:10:40
【问题描述】：

我正在尝试将客户端通过文件浏览器选择的图像上传到 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 中输入已上传图片的图片网址，它可以正常工作，但我想上传用户通过文件浏览器选择的图片。

【问题讨论】：

标签： jquery ajax upload

【解决方案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，他的回答帮助我找到了解决方案。

【讨论】：

【解决方案2】：

我说：

您需要阅读源代码

例如，使用 new FileReader() (JS)

将源添加到变量 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>

【讨论】：

我知道如何预览，但我不想预览我想上传到 imgur。我已经给出了如何将图像上传到 imgur 的代码，但我需要图像的 url，但是我如何从中上传图像的 url？

【解决方案3】：

阅读 websky 的回答后。我可以成功上传到 Imgur！谢谢 :) 所以我想为任何在将图片上传到 Imgur 时遇到问题的人总结一下

你需要准备base64编码的图片（请阅读websky的回答看看如何）
使用“substr”函数仅从 base64 获取数据部分
准备您的 ajax 并像这样发布到 Imgur

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

希望有帮助:)

【讨论】：

【解决方案4】：

您应该使用 CURL 通过 imgur api 上传图像。这将返回您与 JS ENCODED 信息。您可以轻松检索从那里的网址。

【讨论】：

cURL 与 Ajax？那会怎样？
不，我建议不要使用 jquery 而是使用 CURL