JavaScript选择图像到img标签 [英] JavaScript selecting image to an img tag

问题描述

我有一个虚拟配置文件系统用于类项目，它需要一个配置文件图片，并且它需要一个选项来在本地（从您的硬盘驱动器）更改它。我有一个工作 img 标签，它包含一个占位符图像作为默认值，当您点击更改图片时，打开文件对话框打开。我现在需要工作的是为它们选择的图像设置 img 标记的图像链接。这是我到目前为止。

 < div id =userphoto> 
< a>< div class =gravatar-wrapper-128>< img id =imagesrc =http://blog.ramboll.com/fehmarnbelt/wp-content/themes /ramboll2/images/profile-img.jpgalt =class =logowidth =120height =120>< / div>< / a> 
< div class =change-picture-slidestyle =top：30px;> 
< input accept =image / *type =fileid =uploadname =uploadstyle =visibility：hidden; width：1px; height：1px/> 
< a href =onclick =changePicture（）; return false>更改图片< / a> 
< / div> 
< / div> 
< script> 
函数changePicture（）{
 //打开打开的文件对话框
 document.getElementById（'upload'）。click（）; 
 var link = document.getElementById（'upload'）。url; 
 //改变图片
 var img = document.getElementById（image）; 
 img.src = link; 
} 
< / script> 
  

知道这一点是无法完成的，我怎么能够将用户选择的图片匿名上传到< imgur 并使用此链接？

解决方案您可以在javascript中使用文件阅读器来尝试此操作。 $ b

 < div id =userphoto> ; 
< div class =gravatar-wrapper-128>< img id =imagesrc =body-img.jpgalt =class =logowidth =120height = 120 >< / DIV> 
< div class =change-picture-slidestyle =top：30px;> 
< input accept =image / *type =fileid =uploadname =uploadonchange =readURL（this）;style =visibility：hidden; /> 
< a href =onclick =changePicture（）; return false>更改图片< / a> 
< / div> 
< / div> 
< script> 
函数changePicture（）{
 $（'＃upload'）。click（）; 
} 
函数readURL（输入）
 {
 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> 
  

I have a fake profile system for a class project, it requires a profile picture, and it needs an option to change it locally (from your hard drive). I have a working img tag that holds a placeholder image as a default, and when you click change picture, an open file dialog opens. All I need to work now is setting the image link for the img tag with the image they selected. This is what I have so far.

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

Knowing this can not be done, how could I have the image the user selected be uploaded anonymously to imgur and using this link?

解决方案

You can try this by using file reader in 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>

这篇关于JavaScript选择图像到img标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！