jQuery

Question

我正在尝试将客户端通过文件浏览器选择的图像上传到 imgur.com，但问题是我怎样才能让 url 将图像上传到 imgur，因为我们需要 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

我说：

你需要阅读源代码

例如，使用 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>

Answer 2

看到websky的回答后，我做了一些研究，找到了答案。他漏掉了分隔 url 的一行。所以这是我使用的并且有效的简化代码：-

$('#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 他的回答帮助我找到了解决方案。

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

希望对您有所帮助:)

Answer 4

你应该使用 CURL 来使用 imgur api 上传图片。这将 return 你用 JS 编码的信息。您可以轻松检索 URL 从那里开始。

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

jQuery - Getting Image url/link/path to upload image on imgur from client side

ajax

upload