带有缩略图预览的图像文件上传 - 如 Zurb - 不工作？

Question

这是我所拥有的：

我正在尝试实现 ZURB 文件上传器，但是在上传文件时遇到了问题。我想知道我的 upload.php 文件是否有问题。该网站在 wordpress 上运行，我正在使用的表单是用户个人资料创建过程的一部分。

这基本上是我想做的：

-仅将图像文件作为较大表单的一部分上传

-该文件必须放在自定义文件夹中，并且可以在配置文件过程中存储在那里（用户输入所有信息需要几分钟时间）。

-以缩略图形式预览图像文件

这是JQ：

$(document).ready(function(){

var thumb = $('img#thumb'); 

new AjaxUpload('imageUpload', {
    action: $('form#newHotnessForm').attr('action'),
    name: 'userfile',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

});

这里是html：

<div class="preview">
<img id="thumb" width="50px" height="50px" src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" />
</div>
<span class="wrap hotness">
<form id="newHotnessForm" action="<?php bloginfo('template_url'); ?>/upload.php" enctype='multipart/form-data'>                     
    <input type="file" id="imageUpload" size="20" accept="image/*"/>
    <label>Upload your image</label>
</form>

这里是upload.php文件：

$allowedExts = array("gif", "jpeg", "jpg", "png");
$extension = end(explode(".", $_FILES['userfile']["name"]));
if ((($_FILES['userfile']["type"] == "image/gif") 
|| ($_FILES['userfile']["type"] == "image/jpeg") 
|| ($_FILES['userfile']["type"] == "image/jpg") 
|| ($_FILES['userfile']["type"] == "image/png")) 
&& ($_FILES['userfile']["size"] < 20000000) 
&& in_array($extension, $allowedExts)) {
  if ($_FILES['userfile']["error"] > 0)
    {
    echo "Return Code: " . $_FILES['userfile']["error"] . "<br>";
    }
  else
    {
echo "Upload: " . $_FILES['userfile']["name"] . "<br>";
echo "Type: " . $_FILES['userfile']["type"] . "<br>";
echo "Size: " . ($_FILES['userfile']["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES['userfile']["tmp_name"] . "<br>";

if (file_exists("http://mysite.com/wp-content/themes/mytheme/uploads/" . $_FILES['userfile']["name"]))
  {
  echo $_FILES['userfile']["name"] . " already exists. ";
  }
else
  {
  move_uploaded_file($_FILES['userfile']["tmp_name"], "http://mysite.com/wp-content/themes/mytheme/uploads/" . basename($_FILES['userfile']['name']));
  echo "Stored in: " . "http://mysite.com/wp-content/themes/mytheme/uploads/" . $_FILES['userfile']["name"];
   }
 }
} else {echo "Invalid file";}

我想知道我是否在这里遗漏了什么。

谢谢。

Answer 1

我终于有上传文件的东西了。

方法如下：

1-由 bodi0 进行了上述建议的更改（谢谢！）

2-用这个更改了我的 upload.php 文件：

$dirImagePath=dirname(__FILE__);
move_uploaded_file($_FILES['userfile']['tmp_name'], $dirImagePath.'/uploads/'.$_FILES['userfile']['name']);

找到解决办法是多么痛苦啊。

Answer 2

设置将发布到您的服务器的文件表单元素的name。在您的情况下，HTML 代码应该是：

<input type="file" id="imageUpload" name="userfile" size="20" accept="image/*"/>