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

在环顾四周数周后，我完全被书中已有的教程弄糊涂了，我决定编写自己的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);
      }
    });
  });
});

$（文档）.ready（函数（）{
变量thumb=$（“#thumb”）；
$（'#profilepicinput'）.live（'change'，function（））{
$（“#预览”）.html（“”）；
$（“#预览”）.html（“”）；
$（“#registerpt3”）.ajaxForm({
目标：$（'#registerpt3'）.attr（'action'））
}).submit（）；
});
$（'#profilepicbutton'）。更改（函数（）{
警惕（“男孩，我讨厌PHP”）；
$.ajax({
类型：“POST”，
url:“register3.php”，
成功：功能（msg）{
警报（“保存的数据：“+msg”）；
$.ajax({
类型：“POST”，
url:“retrievePic.php”，
成功：功能（msg）{
var image=新图像（）；
$（图像）.load（函数（）{
log（“我们已经上传了这张图片”）；
}).attr（'src'，'images/'）；
警报（“AJAX成功！”）；
},
错误：函数（msg）{
警惕（“不起作用”）；
}
});
},
错误：函数（msq）{
警报（“没有工作！：”+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;
}

---

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

人们用来上传文件的是：

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

---

不过，使用一些现有的上载库/方法可能会更好。我写过，这不是一件容易的事。

出于安全目的，大多数浏览器不会通过ajax发送文件。为了在上传时有一个假装的ajax效果，您可以尝试使用优秀的，它使用一个隐藏的iframe来进行上传

因为这是目前为止唯一的答案——也是正确的——请允许我给你一些建议：

• 大多数使用PHP的人都喜欢PHP（Horatio，天堂和地球上有更多的东西）。他们中的大多数人都会认为你的“PHP很烂”这句话是一种非常自命不凡的说法，因为你的问题更多地与缺乏Ajax和http实现的基本知识有关，而不是与语言的错误有关。因此，缺乏答案和不受欢迎的评论

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

• 如果一张表格由一百个字段组成，并且只有一个字段是相关的，请只张贴相关字段

---

可怕的错误消息。当你将代码发送给你的客户时，请确保你没有留下它们。我只是在和我的兄弟开玩笑。“环顾四周数周后，我完全被书上的教程弄糊涂了，我决定写我自己的jQuery上传脚本。”我很困惑。你不能让教程正常工作，所以你决定从头开始写？这似乎不是一个好主意。我的意思是，这很好，但我如何改进我的脚本？这不是一个代码审查论坛。正如@romaninsh在他的回答中指出的那样，你需要改进你的脚本，不要试图通过AJAX上传文件，这是行不通的？为什么这样不行呢？因为您是通过JavaScript调用PHP函数，而不是通过正常的表单POST提交。出于安全原因，JavaScript无法在大多数（我相信是所有主要的）浏览器中访问文件上载字段。同样，这是@romaninsh的答案。^^^这个valumns.com/ajax-upload脚本是怎么回事。。。没有地方可以找到ajaxupload.js脚本，我没有时间解码他的脚本的其余部分。大+1。我们在上一篇文章中已经告诉了他关于AJAX和文件的事情，但这次可能会沉沦。@ceejayoz我希望如此——看到另一篇文章太晚了。我认为插件部分可以做到这一点。