php＆jquery立即上传图像并预览显示

我期待创建一个用户可以浏览的上传模块，点击打开，它将立即显示该图像的预览，而无需单击提交按钮，以便用户可以继续键入其他信息。

我在下面做了一个简单但不完整的jquery，它基本上捕获了图像名称。 但我的问题是如何将上传图像发布到php脚本，因为POST没有提交按钮？ 我无法捕获$ _FILES数组值。

jQuery的：

$(document).ready(function() { $("#uploadimage").change(function() { var imagesrc = $("#uploadimage").val(); $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(), function(data){ //do something here },"json"); }); }); 

HTML格式：

 
 
 
Image: 
 
Upload a photo: 
 
  

我已经看到了Uploadify可以做什么，但我想自己创建一个。

问候

Answer 1

您只能通过发布表单发布图像，因此必须使用iframe上传图像而不重新加载主页面。 当iframe重新加载时，在其响应中添加一些脚本，触发主页面中的回调函数以显示刚刚上传的图像。

Answer 2

最近我看到了一篇关于jQuery解决方案的文章：

Zurb游乐场：“图像上传，减少100％。保证。”

我会在这里重写它，但不要因为它是多余的。

Answer 3

因为每个人都找不到ajaxupload.js脚本……你可以在这里下载。

Answer 4

无法使用纯AJAX上传文件。 您可能需要签出支持文件上传的Form Plugin： http ： //jquery.malsup.com/form/并将其集成到您的解决方案中。 在那里你使用ajaxSubmit很少有很好的例子。

Answer 5

您可能想尝试本教程：

http://www.finalwebsites.com/forums/topic/php-ajax-upload-example

这应该可以帮助你完全按照你的要求去做。

Answer 6

这不需要提交按钮。 您可以使用图像并浏览文件，它会自动将其发送到php。

Answer 7

 
 
 
 
  
 
 
 Select image Change   Remove 
  

上面的代码来自bootstrap。 查看引导程序的metronic模板。