Fine Uploader 无法上传文件

Question

我正在使用文件上传器 jquery 插件来在我的网站上上传 ajax 文件。但是我无法弄清楚出了什么问题以及为什么它不起作用。

插件：http://fineuploader.com/index.html

我的代码：

我直接从他们的演示中获取代码：

$(document).ready(function() {
$fub = $('#fine-uploader-basic');
$messages = $('#messages');

var uploader = new qq.FileUploaderBasic({
  button: $fub[0],
  action: 'http://localhost/script/file_upload/upload_test',
  debug: true,
  allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
  sizeLimit: 204800, // 200 kB = 200 * 1024 bytes
  onSubmit: function(id, fileName) {
    $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
  },
  onUpload: function(id, fileName) {
    $('#file-' + id).addClass('alert-info')
                    .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
                          'Initializing ' +
                          '“' + fileName + '”');
  },
  onProgress: function(id, fileName, loaded, total) {
    if (loaded < total) {
      progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
      $('#file-' + id).removeClass('alert-info')
                      .html('<img src="client/loading.gif" alt="In progress. Please hold."> ' +
                            'Uploading ' +
                            '“' + fileName + '” ' +
                            progress);
    } else {
      $('#file-' + id).addClass('alert-info')
                      .html('<img src="client/loading.gif" alt="Saving. Please hold."> ' +
                            'Saving ' +
                            '“' + fileName + '”');
    }
  },
  onComplete: function(id, fileName, responseJSON) {
    if (responseJSON.success) {
      $('#file-' + id).removeClass('alert-info')
                      .addClass('alert-success')
                      .html('<i class="icon-ok"></i> ' +
                            'Successfully saved ' +
                            '“' + fileName + '”' +
                            '<br><img src="img/success.jpg" alt="' + fileName + '">');
    } else {
      $('#file-' + id).removeClass('alert-info')
                      .addClass('alert-error')
                      .html('<i class="icon-exclamation-sign"></i> ' +
                            'Error with ' +
                            '“' + fileName + '”: ' +
                            responseJSON.error);
    }
  }
});
});

HTML：

<div id="fine-uploader-basic" class="btn btn-success">
  <i class="icon-upload icon-white"></i> Click to upload
</div>
<div id="messages"></div>

PHP：

public function upload_test() {
  $upload = move_uploaded_file('./user_files', $_FILES['qqfile']['tmp_name']);
  if($upload) {
    echo json_encode(array('success' => true));
  } else {
    echo json_encode(array('success' => false, 'error' => $upload));
  }
}

我认为问题出在 PHP 上，但我不知道我做错了什么。在我发疯之前请帮忙。

谢谢。

Answer 1

我没有阅读您的 js 和 html 部分，但您需要更改您的 PHP 部分。 看看他是怎么做到的

fine-uploader PHP

Answer 2

删除 action: 'http://localhost/script/file_upload/upload_test', 并更改为

request: {
            // path to server-side upload script
        endpoint: 'script/file_upload/upload_test/php.php'
         }

也在你的 php.php 文件中取消注释：

$allowedExtensions = array("jpeg", "jpg", "bmp", "png");
$sizeLimit = 10 * 1024 * 1024;
$uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
$result = $uploader->handleUpload('uploads/'); //folder for uploaded files
echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

Answer 3

如果有帮助，这里是我的设置：

-- jquery.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Fine Uploader Demo</title>
        <link href="client/fineuploader.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      </head>
      <body>
        <div id="fine-uploader"></div>

        <script src="client/jquery.fineuploader-3.1.1.min.js"></script>
        <script>
          function createUploader() {
            var uploader = new qq.FineUploader({
              debug: true,  
              // Pass the HTML element here
              element: document.getElementById('fine-uploader'),
              // or, if using jQuery
              // element: $('#fine-uploader')[0],
              // Use the relevant server script url here
              // if it's different from the default “/server/upload”
              request: {
                endpoint: 'php.php'

              }
            });
          }

          window.onload = createUploader;
        </script>
      </body>
    </html>

--- php.php（与 jquery.html 在同一文件夹中）

以下行已取消注释：

    // list of valid extensions, ex. array("jpeg", "xml", "bmp")
    $allowedExtensions = array();
    // max file size in bytes
    $sizeLimit = 10 * 1024 * 1024;
    //the input name set in the javascript
    $inputName = 'qqfile';

    $uploader = new qqFileUploader($allowedExtensions, $sizeLimit, $inputName);

    $result = $uploader->handleUpload('uploads/');
    header("Content-Type: text/plain");
    echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

上传文件夹有777个权限

MAMP 注意：上传时会抛出 stream_copy_to_stream() 错误。 解决方案： 将 php.php 中的第 58 行从 $temp = tmpfile(); 到 $temp = fopen("php://temp", "wb"); //$temp = tmpfile();

希望这对某人有所帮助。

Answer 4

我看到很多人在处理服务器端脚本来处理上传的文件时遇到了麻烦。我需要一些时间来弄清楚如何编写自己的脚本来将上传的文件存储在数据库中。下面的代码示例对于遇到相同问题的人来说非常具有说明性。

<?php
$file = $_FILES['qqfile'];
$uploadDirectory = 'uploads';
$target = $uploadDirectory.DIRECTORY_SEPARATOR.$file['name'];
$result = null;
if (move_uploaded_file($file['tmp_name'], $target)){
    $result = array('success'=> true);
    $result['uploadName'] = $file['name'];
} else {
    $result = array('error'=> 'Upload failed');
}
header("Content-Type: text/plain");
echo json_encode($result);

当然，您必须调整上传目录的名称。它应该可以与下面的 javascript 一起正常工作：

$(document).ready(function() {
    var uploader = new qq.FineUploader({
        element: $('#basicUploadSuccessExample')[0],
        debug: true,
        request: {
            endpoint: "server/php/example.php"
        }
    });
});

只要确保您的 html 中包含所有 *.js。

Answer 5

我在上传到文件夹时也遇到了问题。为了获得更多信息，我将 qqFileUploader.php 行 59 更改为：

if (!is_writable($uploadDirectory) || !is_executable($uploadDirectory))
{
return array('error' =>"Server error. Uploads directory isn't writable or executable. CUR_DIR: " . getcwd() . " DIR: " . $uploadDirectory);
}

这样做之后，我发现问题是它正在我的 php 目录中寻找与根目录相对的文件夹。

我变了 $result = $uploader->handleUpload('up/'); 到 $result = $uploader->handleUpload('../up/'); 问题已为我解决。

Answer 6

“文件上传器”，我假设？

您是否进行过任何基本调试，例如向您的 php 代码添加错误处理？您的代码在多个级别上被破坏：

1) move_upload_file 需要一个目标 FILE 名称。您只提供一个目录：

move_uploaded_file('/path/to/destination/on/server.txt', $_FILES['qqfile']['tmp_name']);

2) 你没有检查上传是否真的成功。

if($_FILES['qqfile']['error'] !== UPLOAD_ERR_OK) {
     die("UPload failed with error code " . $_FILES['qqfile']['error']);
}

错误代码在这里定义：http://php.net/manual/en/features.file-upload.errors.php