Question

我正在为一个课程项目创建一个假论坛，在your profile标签中，您可以选择更改您的个人资料图片。由于它是一个虚假的论坛，它不涉及服务器或实际上传等，所以我避免任何PHP。我希望上传链接要做的是打开仅限图片的OpenFileDialog（其中包含图片）。按＆＃34;打开＆＃34;在对话框中，我希望它将它们刚刚打开的文件位置放入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;
}

谢谢！

Answer 1

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

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

查看此演示http://html5demos.com/file-api

html打开本地图像

1 个答案: