JavaScript将图像选择为img标记

Question

我有一个类项目的假配置文件系统,它需要一个配置文件图片,它需要一个选项来在本地(从您的硬盘驱动器)更改它.我有一个工作img标记,它将占位符图像保存为默认值,当您单击时change picture,将打开一个打开的文件对话框.我现在需要工作的是img使用他们选择的图像设置标签的图像链接.这就是我到目前为止所拥有的.

<div id="userphoto">
    <a><div class="gravatar-wrapper-128"><img id="image" src="http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg" alt="" class="logo" width="120" height="120"></div></a>
    <div class="change-picture-slide" style="top: 30px;">
        <input accept="image/*" type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" />
        <a href="" onclick="changePicture(); return false">Change Picture</a>
    </div>
</div>
<script>
    function changePicture() {
        //open the open file dialog
        document.getElementById('upload').click();
        var link = document.getElementById('upload').url;
        //change picture
        var img = document.getElementById("image");
        img.src = link;
    }
</script>

知道这一点无法完成,我怎样才能将用户选择的图像匿名上传到imgur并使用此链接？

Answer 1

你可以在javascript中使用文件阅读器来试试这个.

<div id="userphoto">
        <div class="gravatar-wrapper-128"><img id="image" src="body-img.jpg" alt="" class="logo" width="120" height="120"></div>
        <div class="change-picture-slide" style="top: 30px;">
            <input accept="image/*" type="file" id="upload" name="upload" onchange="readURL(this);"style="visibility: hidden;" />
            <a href="" onclick="changePicture(); return false">Change Picture</a>
        </div>
    </div>
    <script>
        function changePicture(){
            $('#upload').click();
        }
        function readURL(input)
        {
            if (input.files && input.files[0])
            {
                var reader = new FileReader();
                reader.onload = function (e)
                {
                    $('#image')
                    .attr('src',e.target.result);

                };
                reader.readAsDataURL(input.files[0]);
            }
        }



    </script>

Answer 2

I believe the code is:

var link = document.getElementById('unpload').value;

Update after AstroCB's comment:

You could then use:

var link_split = link.split('\');
var link = link_split.length;

Or something similar I'm not 100% sure of the syntax maybe someone can help you out a bit more