1

我正在为一个班级项目制作一个假论坛，在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;
}

谢谢！

4

1 回答 1

2

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

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

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

于 2014-06-21T08:59:47.630 回答