3

基本上，我想要一个类似于 twitter 的功能，当我们在 twitter 上上传图片时，它会自动运行微调器并在旧头像位置更改图像。

我试图这样做但有点失败，但是我做了以下事情：

<script language="javascript">
    function changeImage() {


        document.getElementById("newavatar").src = "http://dummyimage.com/136x136/000/fff";

}
</script>


<img class="already-avatar" id="newavatar" src="avatar_default.png" width="136px" height="136px"/>
<input class="upload-image" onclick="changeImage()" type="file" name="avatar" accept="image/jpeg, image/png">

我正在执行上述操作，它实际上更改了图像但是图像不是选定的图像，我知道需要先上传图像才能更改它，但很难做到这一点。

如果有人可以请帮助我，我是初学者，任何帮助将不胜感激。

谢谢

4

3 回答 3

2

尝试这个：

<script language="javascript">
function changeImage() {
    document.getElementById("newavatar").src = document.getElementById("input-file").value;
}
</script>


<img class="already-avatar" id="newavatar" src="avatar_default.png" width="136px"    height="136px"/>
<input id="input-file" class="upload-image" onchange="changeImage()" type="file"    name="avatar" accept="image/jpeg, image/png">

您必须将事件侦听器从“onclick”更改为“onchange”以及脚本。希望能帮助到你！

于 2013-09-20T06:40:58.907 回答
1

如果我理解正确，您首先要上传图像，然后在不重新加载页面的情况下将其显示给用户。

然后您首先必须使用 PHP 或其他语言使用 Ajax 将其上传到您的服务器，然后替换图像，因此使用 Ajax 响应发送图像的路径并进行替换。

这是一个如何执行此操作的示例。

于 2013-09-20T06:15:16.260 回答
1

您需要做的第一件事是将文件输入放入表单并同步发布到服务器，或者使用 ajax 异步上传文件。我推荐前者，因为 ajax 对于一个完整的初学者来说可能有点棘手。

下一步是在文件提交到服务器后对其进行处理。根据您用于处理服务器端请求的语言，实际编码会有所不同。但基本上，您希望在上传文件时安排文件的保存位置，以便您知道如何引用文件。

最后一步是找到一些方法来告诉客户端新文件在哪里。您可以为此使用会话和 cookie 之类的东西，或者您可以考虑将诸如此类的变量存储在数据库中。

于 2013-09-20T06:16:03.867 回答