如何在不刷新页面的情况下使用 ajax/jQuery 和 PHP 上传图片？答案

【问题标题】：How can I upload pictures with ajax/jQuery and PHP without refreshing the page?如何在不刷新页面的情况下使用 ajax/jQuery 和 PHP 上传图片？
【发布时间】：2011-04-16 17:57:27
【问题描述】：

我正在尝试允许用户上传图片并将它们显示在同一页面上。例如，Facebook 允许用户在注册时选择文件并上传，而无需重新加载页面。我该怎么做？

【问题讨论】：

标签： php jquery ajax file-upload

【解决方案1】：

使用 $post 或 $ajax 函数从文件中获取图像并更新包含图像的 div。

$.post('file_of_image', function(data) {
  $('#image_containing_div').html(data);
});

在包含文件的图像中，在php引号中写上echo“”和其他必要的参数。

【讨论】：

【解决方案2】：

您可以使用Uploadify

正如@Groovetrain 指出的那样，这是基于 Flash 的，您可能需要考虑使用 iframe 来代替。但如果 flash 没问题，这里是在上传时显示图像的代码：

标记

<input type="file" id="file_upload" name="file_upload" />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
<div id="preview"></div>

$('#file_upload').uploadify({
  'uploader'    : '/uploadify/uploadify.swf',
  'script'      : '/uploadify/uploadify.php',
  'cancelImg'   : '/uploadify/cancel.png',
  'folder'      : '/uploads',
  'fileExt'     : '*.jpg;*.gif;*.png',
  'fileDesc'    : 'Image Files'
  'onComplete'  : function(event, ID, fileObj, response, data) {
      $('#preview').append('<img src="uploads/' + fileObj.name + "/>');
    }
});

【讨论】：

没错，但这确实不是 AJAX，就其本身而言，因为它是基于闪存的。
当然onComplete回调钩子也是由无闪存插件提供的。

【解决方案3】：

我过去使用的一个选项是 Andrew Valums 的 Ajax Upload。

【讨论】：

【解决方案4】：

我的猜测是您需要没有闪光灯的东西。要让它与 javascript 一起工作，您需要一个带有 iframe 的解决方案。（由于 javascript 访问限制）这是 jquery 的一个很好的解决方案：http://valums.com/ajax-upload/ 如果你用谷歌搜索“jquery iframe 文件上传”之类的内容，你可以找到更多

【讨论】：