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

I am trying to upload image that is selected by client via file browser to imgur.com but problem is that how can I get the url to upload image to imgur because we need url to upload image.

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

My code works well with Image already on net for example http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png

我的代码适用于已经在网上的Image,例如http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png

Here is css code -

这是css代码 -

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

Here is jQuery code that is triggered via button -

这是通过按钮触发的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);
}

If in var imgUrl I enter a image url of already uploaded image it works fine, but I want to upload image that user selects via file browser.

如果在var imgUrl我输入已经上传的图像的图像网址它工作正常,但我想上传用户通过文件浏览器选择的图像。

3 个解决方案

#1

After seeing the answer of websky I did some research and found the answer. He missed one line which seprates url. So here is simplified code which I used and that worked : -

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

Displaying URL of image after upload -

上传后显示图片的网址 -

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

Thanks to websky his answer helped me in finding solution.

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

#2

I say:

you need to read the source

你需要阅读来源

for example, use new FileReader() (JS)

例如,使用新的FileReader()(JS)

Add a source to a variable imgUrl

将源添加到变量imgUrl

my vision :) :

我的愿景:):

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

#3

After reading websky's answer. I can upload to Imgur successfully!. Thank You :) so i would like to sum it up for anyone who have problem uploading image to Imgur

看完websky的回答后。我可以成功上传到Imgur!谢谢:)所以我想总结一下将图像上传到Imgur有问题的人

You need to prepare base64 encoded image (please read websky's answer to see how)

你需要准备base64编码的图像(请阅读websky的答案,看看如何)

Get only the data part from base64 using "substr" function

使用“substr”函数仅从base64获取数据部分

Prepare your ajax and posting to Imgur like this

准备你的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);
      }
})

Hope this help :)

希望这有帮助:)

#1