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的demo

Answer 4

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

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

imgControl.src = filePathFromServer;

如果您想尝试一些新的 HTML5 ......我建议您查看this demo。

Answer 5

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

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

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

5 个答案: