php & jquery 上传图片并即时预览显示答案

【问题标题】：php & jquery upload image and preview display instantlyphp & jquery 上传图片并即时预览显示
【发布时间】：2011-03-08 18:36:14
【问题描述】：

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

我在下面做了一个简单但不完整的 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表单：

<form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST">
    <table> 
        <tr><td>Image: </td><td><div id="imagepreview"></div></td></tr> 
        <tr><td>Upload a photo: </td><td><input type="file" name="uploadimage" id="uploadimage" /></td></tr>
    </table> 
</form>

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

问候

【问题讨论】：

大家好，大多数示例都需要上传按钮。但是一旦用户选择要上传的文件，我就会寻找自动上传。这一切都将在不刷新页面的情况下完成。

标签： php jquery upload

【解决方案1】：

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

Zurb Playground : "Image Uploads with 100% Less Suck. Guaranteed."

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

【讨论】：

嘿，这就是我要找的。但没有任何文件下载。但我会尝试从查看源代码拼凑代码=）
第一。它不是一个 jquery 解决方案。第二。它甚至不是ajax解决方案。如果你仔细查看 js 源文件你会发现这是 iframe 解决方案。
@codez - 你是对也是错。我从未说过这是一个 AJAX 解决方案，所以这一点没有实际意义。是的，AJAX 上传功能确实使用 iframe 来执行工作，但是，该功能已被包装到 jQuery 插件中。所以，本质上，它是一个 jQuery 解决方案。
嗯好的。从解决方案中，我不知道上传图像的 php 脚本调用在哪里。
@Lucanos - 在评论我的回答时，您说可以使用 AJAX 完成，所以我认为您认为它是 ajax 解决方案，实际上您无法通过 ajax 发送文件在没有特殊浏览器插件或配置的标准浏览器中。并且该示例中的 Ajaxupload 未包含在 jquery 插件中，请查看示例中如何调用它：new AjaxUpload()。 jquery 插件通过 $ 对象调用。如果是 jquery 插件，它会被称为： $('.some').AjaxUpload({...});

【解决方案2】：

对于每个人都找不到ajaxupload.js 脚本... 可以here下载。

【讨论】：

【解决方案3】：

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

【讨论】：

你可以使用 AJAX。 IFrame 本来是 AJAX 之前的解决方案。
Tks。我已经搜索了相当多的 iframe，但其中大部分需要用户单击上传按钮。我很想看到一旦用户选择文件就可以自动上传的那些。
更正：正如@codez 和@bas 所指出的，文件不能通过AJAX 上传。我的错。
嗨 lucanos，请问有什么办法吗？我可以使用 ajax 提交将 $_FILES 发布到 php 文件吗？？
@nuttynibbles：看看我链接到的教程，它应该包含实现所需功能所需的所有代码、链接和说明。

【解决方案4】：

无法使用纯 AJAX 上传文件。您可能需要查看支持文件上传的表单插件：http://jquery.malsup.com/form/ 并将其集成到您的解决方案中。有几个使用 ajaxSubmit 的好例子。

【讨论】：

【解决方案5】：

你可能想试试这个教程：

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

这应该可以帮助您完全按照您的要求进行操作。

【讨论】：

好的。我并不是要成为一个刻薄的家伙，但是 AJAXUPLOAD.JS 脚本在哪里！抱歉，但所有这些教程都依赖于该脚本，并且无处可寻！人们只是在教程中一直引用它，就像你引用的那样，但是当你去网站下载它时，你会得到一些没有 ajaxupload.js 脚本的奇怪文件夹！！！！！！！！！救命！！！！！！！！！

【解决方案6】：

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

<div id="covercameraimage">
<label for="photoimg">
<img src="siteimages/cameracoverimage.png" style="cursor:pointer" title="Upload Cover" alt="Upload Cover" />
</label>
<form id="imageform" method="post" enctype="multipart/form-data" action='c.php'>
<div id='imageloadstatus' style='display:none'><img src="load.gif" alt="Uploading...."/></div>
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<div id='imageloadbutton'>
<input type="file" id="photoimg" name="photoimg" style="cursor: pointer;  display: none"//>
</div>
</form>
</div>

<script type="text/javascript">
$(document).ready(function()
{

$('body').on('change','#photoimg', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#usercover',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>
</div>

【讨论】：

【解决方案7】：

<div class="control-group-upload">
     <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
             <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                 <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
             </div>
         <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
         <div>
             <span class="btn btn-file"><span class="fileupload-new">Select image</span>
             <span class="fileupload-exists">Change</span>
             <input type="file" class="default" />
         </span>
     <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
     </div>
</div>

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

【讨论】：