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

Question

我创建了以下网页：

...
<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>
...

我希望能够将图像上传到文件系统或数据库（尚未决定），并且能够在文件被保存后立即在<img id="contact-image" />查看上传的图像。上传，而无需重新加载页面，即使用AJAX。

您能告诉我我应该遵循的概念吗？ 我知道我在提交表单时调用PHPScripts/upload.php犯了一个错误。 我的猜测是我应该改为调用一些javascript函数，但是我从那里去哪里，该函数应该是什么样？ 谢谢。

Answer 1

使用MVC或任何其他后端，这非常简单。 假设您有一个名为UploadPicture的控制器。 当网络服务器上传完图片后，您只需使服务器返回带有图像路径或所需内容的json。

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

我之前已经做过，就像我上面描述的那样。

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

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

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

$ .ajax上的参考-http: //api.jquery.com/jQuery.post/

我希望这有帮助。

Answer 2

尝试Ajax上传

您可以在此处找到说明和示例：

http://www.zurb.com/playground/ajax_upload

Answer 3

你尝试过swfupload吗？

这是一个使用PHP的演示

Answer 4

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

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

imgControl.src = filePathFromServer;

如果您想尝试一些新的HTML5 ，我建议您看一下这个演示 。

Answer 5

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

http://www.articlealley.com/article_573896_81.html