html 打开本地图片答案

【问题标题】：html opening a local imagehtml 打开本地图片
【发布时间】：2014-08-11 23:05:47
【问题描述】：

我正在为一个班级项目制作一个假论坛，在your profile 标签中，您可以选择更改您的个人资料图片。由于它是一个假论坛，它不涉及服务器或实际上传，等等..所以我避免使用任何 php。我想要上传链接做的是打开一个OpenFileDialog 仅限于图像（其中是）。当您在对话框上按“打开”时，我希望它获取他们刚刚打开的文件位置到 var 中并将 img 标签源设置为该 var。

这是我目前所拥有的

<div class="profile_picture">
    <a><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-overlay" style="top: 299px;">
        <div class="change-picture-slide" style="top: 30px;">
        <input accept="image/*" type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
        <a href="" onclick="changePicture(); return false">Change Picture</a>
    </div>
</div>


function changePicture() {
    //open the open file dialog
    document.getElementById('upload').click();
    //get the file location into a var
    var link = document.getElementById('upload').url; //this i know is not right

    //change picture
    var img = document.getElementById("image");
    img.src = link;
    return false;
}

谢谢！

【问题讨论】：

标签： html image fileopendialog

【解决方案1】：

现代浏览器可以使用 HTML 5 文件 API 通过 javascript 访问文件内容：

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

看看这个演示http://html5demos.com/file-api

【讨论】：