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

I have created the following web page:

我创建了以下网页:

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

I want to be able to upload the the image to file system or database (haven't decided yet) and to be able to see the uploaded image in the <img id="contact-image" /> immediately after the file has been uploaded, without reloading the page, i.e. using AJAX.

我希望能够在文件上传后立即将图像上传到文件系统或数据库(尚未决定)，并且能够在文件上传后立即在如何使用AJAX上传和预览上传的图像? 中看到上传的图像，而无需重新加载页面，即使用AJAX。

Can you show me the concept that I should follow? I know that I am making a mistake by calling the PHPScripts/upload.php on form submitting. My guess is that I should call some javascript function instead, but where do I go from there and what should that function look like? Thanks.

你能告诉我应该遵循的概念吗?我知道我调用PHPScripts/upload是犯了一个错误。php表单提交。我的猜测是我应该调用一些javascript函数，但是我该怎么做呢?谢谢。

5 个解决方案

#1

With MVC or any other backend it's fairly simple. Let's assume you have a controller with the name UploadPicture. When the webserver has finished uploading the picture, you would simply make the server return json with the image path or whatever you need.

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

I would recommend using jQuery since it's an excellent framework to work with Javascript and has a good cross-browser support.

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

I've done this before and it was just like what I described above.

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

IF you happen to know the path and image name, then you wouldn't even need to return anything from the server. You would simply do with jQuery when the upload has finished:

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

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

And you could use $.ajax to trigger when the submit has finished.

你可以用$。在提交完成时触发ajax。

Reference on $.ajax - http://api.jquery.com/jQuery.post/

美元的参考。ajax - http://api.jquery.com/jQuery.post/

I hope this helps.

我希望这可以帮助。

#2

Try the Ajax upload

试着Ajax上传

You can find explanations and examples it here:

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

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

#3

have you tried swfupload?

你有试过swfupload吗?

here is a demo that uses php

下面是一个使用php的演示

#4

I will suggest you to use the YUI file upload or JQuery plug in for file upload. Once the file is upload you can retrieve the file path from the server and update using the JS on the client side.

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

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

imgControl.src = filePathFromServer;

And if you want to try something new HTML5 ... i will suggest to have a look at this demo.

如果你想尝试新的HTML5…我建议看一下这个demo。

#5

Here's the best solution in my opinion. It doesn't involve jQuery and it provides AJAX-like functionality. Thank you to everyone who has put an effort in helping me resolve this. Cheers!

在我看来，这是最好的解决办法。它不涉及jQuery，并且提供类似ajax的功能。感谢所有为帮助我解决这个问题而努力的人。干杯!

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

#1