如何使用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

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

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

Answer 2

你试过swfupload？

这里是一个使用PHP

Answer 3

随着MVC或任何其他后端这是相当简单的一个demo。假设您有一个名为UploadPicture的控制器。当网络服务器完成上传图片时，您只需让服务器返回带有图片路径的json或任何您需要的东西。

我会推荐使用jQuery，因为它是一个优秀的框架，可以使用Javascript并且具有良好的跨浏览器支持。

我以前做过这件事，它就像我上面所描述的那样。

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

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

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

参考在$阿贾克斯 - http://api.jquery.com/jQuery.post/

我希望这有助于。

Answer 4

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

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

imgControl.src = filePathFromServer; 

如果你想尝试一些新的东西HTML5 ...我会建议看看this demo。

Answer 5

尝试阿贾克斯上传

你可以找到解释和例子在这里：

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