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

好吧，原生文件上传界面（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>

单击它将生成一个对话框，供用户选择如下所示的文件：

enter image description here

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

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

我相信代码是：

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

AstroCB评论后更新：

然后你可以使用：

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

或类似的东西我不是100％确定语法可能有人可以帮助你更多

Answer 4

有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;
    };
}

JavaScript将图像选择为img标记

4 个答案: