Question

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

我的代码：

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

$(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);

uploads文件夹具有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-＆gt; handleUpload（'up /'）; 至 $ result = $ uploader-＆gt; 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

Fine Uploader无法上传文件

6 个答案: