为网站编写自己的 jQuery-PHP 图片上传实用程序

Question

在环顾数周后，我完全被书本上的教程弄糊涂了，我决定编写自己的 jQuery 上传脚本。我以为我可以让它工作，但我遇到了问题。我将列举它们：

在我写这篇文章的页面上，我放置了一个看起来有点像这样的 jQuery 脚本：

$(document).ready(function() {
  var thumb = $('#thumb');  

  $('#profilepicinput').live('change', function(){
    $("#preview").html('');
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
    $("#registerpt3").ajaxForm({
      target: $('#registerpt3').attr('action')
    }).submit();
  });

  $('#profilepicbutton').change(function(){
    alert("Boy I hate PHP");
    $.ajax({
      type: "POST",
      url: "register3.php",
      success: function(msg) {
        alert( "Data Saved: " + msg );
        $.ajax({
          type: "POST",
          url: "retrievePic.php",
          success: function(msg) {
            var image = new Image();
            $(image).load(function(){
              console.log("we have uploaded this image");
            }).attr('src', 'images/');
            alert("AJAX Success!");
          },
          error: function(msg) {
            alert(" didn't work");
          }
        });
      },
      error:function(msq){
        alert("didn't work!: " + msg);
      }
    });
  });
});

这会调用以下脚本，将图片加载到数据库中：

<?php 

session_start();

$email = '';

if (isset($_SESSION['user_email'])) {
  $email = $_SESSION['user_email'];
} else {
  $email = 'dww2@pitt.edu';
}

$link = mysql_connect('censcoredFool.com', 'greetmeet', 'Maverick$41'); 

mysql_select_db(first_1) or die("Opps, You are pretty Got-Damned Stupid!  Did you         realize that?!?!?");

$target = './Uploads/'; 
$target = $target . basename( $_FILES['uploaded']['name']); 

$ok = 1; 

$path = "uploads/";
$Email = $_SESSION['user_email'];
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");

if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
  $name = $_FILES['photoimg']['name'];
  $size = $_FILES['photoimg']['size'];

  if (strlen($name)) {
    list($txt, $ext) = explode(".", $name);
    if (in_array($ext,$valid_formats)) {
      if ($size<(1024*1024)) { // Image size max 1 MB
        $actual_image_name = time().$session_id.".".$ext;
        $tmp = $_FILES['photoimg']['tmp_name'];
        if (move_uploaded_file($tmp, $path.$actual_image_name)) {
          mysql_query("insert into personal_photos      (Email, Pics) values('$email', '$tmp')");
          echo "<img   src='uploads/".$actual_image_name."' class='preview'>";
        } else {
          echo "failed";
        }
      } else {
        echo "Image file size max 1 MB";
      }
    } else {
      echo "Invalid file format..";
    }
  } else {
    echo "Please select image..!";
  }

  exit;
}

我所拥有的似乎都不起作用。我收到成功警报，但图片甚至没有上传。我猜PHP脚本一直运行，但没有抛出异常或任何东西。我如何让这个东西工作？

更新：运行 Firebug 后，我的 PHP 脚本没有获取图片 不知道为什么会这样。需要弄清楚 $_File 数据结构是如何工作的。

Answer 1

出于安全考虑，大多数浏览器不会通过 ajax 发送文件。要对上传产生假装 ajax 效果，您可以尝试出色的 jQuery form plugin，它使用隐藏的 iframe 进行上传。

既然这是迄今为止唯一的答案——而且也是正确的——请允许我给你一些 OT 建议：

• 大多数使用 PHP 的人都喜欢 PHP（天地间有更多的东西，Horatio）。他们中的大多数人会认为你的“PHP 烂透了”的说法是自命不凡的，因为你的问题更多地与缺乏 Ajax 和 http 实现的基本知识有关，而不是与语言的错误有关。因此缺乏答案和不受欢迎的 cmets。

• 你的机智让我分心：请让你发布的代码中的调试输出尽可能具有描述性 - 实际上，简单地编写描述性输出是一件有用的事情无论如何 - 这样更容易找到问题，相信我。

• 如果表单由一百个字段组成，而只有一个是相关的，请只发布相关字段。

Answer 2

出于安全考虑，JavaScript 通常无法访问您硬盘上的文件。这就是为什么 AJAX 通常不适合上传。 （尽管这在最新的浏览器中可能已经改变）。

人们用来上传文件的是：

• iFrame。您需要创建不可见的 iframe 并提交一个表单，其中包含针对该 iframe 的上传表单。您的页面不会刷新，您甚至可以在该框架内执行一些 javascript。
• 闪光。使用 Flash 上传器可以发送多个文件。

虽然，您可能最好使用一些现有的上传库/方法。我写了my own uploader，这不是一件容易的事。