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

好吧，假设您只是在客户端工作，本机文件上传界面 (as I've found) 不允许您这样做。

<input type="file"/> 对您有用的唯一时间是在提交到服务器的 form 中，因为浏览器安全措施阻止您对它执行任何其他操作。

现代浏览器会在客户端为您提供一个虚假的文件路径作为文件上传的结果，以防止对用户文件系统的恶意行为。

但是，我认为Ink Filepicker API 提供了您正在寻找的功能。当用户上传文件时，它会返回一个对象，其中包含文件的名称和一个指向其下载位置的URL，这正是您要查找的内容（这将填充src 图片的属性）。

实际上，设置非常简单。

首先，注册一个免费帐户并获取 API 密钥。在你的head 中，这样设置：

<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<script>filepicker.setKey('API_KEY');</script>

然后，您可以访问 API 的所有功能。

要执行您的要求，您需要创建一个这样的按钮：

<button onclick="handleFiles();">Upload Image</button>

点击它会产生一个对话框让用户选择一个看起来像这样的文件：

然后，创建一个处理函数：

<script>
    function handleFiles() {
        filepicker.pick({
            mimetypes: ['image/*'],
            //you can also define what uploading services you want to use here
        },
        function(e) { //you now have access to the file
            var link = e.url;
            //change picture
            var img = document.getElementById("image");
            img.src = link;            
        });
    }
</script>

我发现这是一个非常有用的 API：here are the docs。

Demo

Answer 2

有 FileReader.readAsDataURL（见 Indra 的回答）还有 window.URL.createObjectURL:

function changePicture() {
    //open the open file dialog
    document.getElementById('upload').click();
    document.getElementById('upload').onchange = function() {
        var file = this.files[0];
        var url = window.URL.createObjectURL(file);
        document.getElementById('image').src = url;
    };
}

Answer 3

您可以通过在 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 4

我相信代码是：

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

AstroCB 发表评论后更新：

然后你可以使用：

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

或者类似的东西我不是 100% 确定语法也许有人可以帮助你更多