图像文件上传与缩略图预览 - 像Zurb - 不工作?

时间:2013-04-19 07:48:57

标签: jquery image wordpress upload preview

这就是我所拥有的:

我正在尝试实现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";}

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

谢谢。

2 个答案:

答案 0 :(得分:0)

设置将发布到您的服务器的文件表单元素的name。在您的情况下,HTML代码应为:

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

答案 1 :(得分:0)

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

以下是:

1 - 通过bodi0进行了上述推荐的更改(谢谢!)

2改变了我的upload.php文件:

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

这是为了找到解决方案所致的皇室痛苦。