Javascript 如何使用AJAX上传和预览上传的图像

我已创建以下网页：

...
<img alt="" src="images/frame.png" id="contact-image" />
<form enctype="multipart/form-data" action="PHPScripts/upload.php" method="POST">
    <input type="file" id="browseContactImageButton" name="image"
           accept="image/jpg,image/jpeg,image/png,image/gif"
           onchange="this.form.submit();" />
</form>
...

。。。
...

我希望能够将图像上载到文件系统或数据库（尚未决定），并且能够在上载文件后立即在

中查看上载的图像，而无需重新加载页面，即使用AJAX

你能告诉我应该遵循的概念吗？我知道在提交表单时调用

phpscript/upload.php

是一个错误。我的猜测是，我应该调用一些javascript函数，但我应该从哪里开始，该函数应该是什么样子？谢谢

你试过了吗

---

这是一个将php与MVC或任何其他后端结合使用的应用程序，非常简单。假设您有一个名为UploadPicture的控制器。当Web服务器上传完图片后，您只需让服务器返回带有图像路径的json或任何您需要的内容

我建议使用jQuery，因为它是一个很好的Javascript框架，并且具有良好的跨浏览器支持

我以前做过，就像我上面描述的那样

如果您碰巧知道路径和映像名，那么您甚至不需要从服务器返回任何内容。上传完成后，只需使用jQuery即可：

$("#contact-image img").attr('src', 'http://PathToImage');

您可以使用$.ajax在提交完成时触发

关于$.ajax的参考-

---

我希望这能有所帮助。

我建议您使用或进行文件上传。上传文件后，您可以从服务器检索文件路径，并在客户端使用JS进行更新

var imgControl = document.getElementById('image');

imgControl.src = filePathFromServer;

---

如果你想尝试新的HTML5。。。我建议您看看。

我认为这是最好的解决方案。它不涉及jQuery，并且提供了类似AJAX的功能。感谢所有努力帮助我解决这个问题的人。干杯

尝试Ajax上传

您可以在此处找到解释和示例：

---

像这样的吗？如果可以帮助您欢迎堆栈溢出，请选中此选项！虽然这在理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。