Question

基本上，我喜欢像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">

我正在做上面的事情，它实际上改变了图像，但是图像不是所选择的图像，我知道图像需要先上传，这样它才能改变它，但很难做到这一点。

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

由于

Answer 1

试试这个：

<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”和脚本。希望它有所帮助！

Answer 2

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

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

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

Answer 3

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

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

最后一步是找到一些方法告诉客户端新文件的位置。您可以为此使用会话和cookie之类的内容，或者您可以查看将这些变量存储在数据库中。

上传/更改Javascript / HTML中的图像

3 个答案: