3

我正在使用文件上传器 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 上，但我不知道我做错了什么。在我发疯之前请帮忙。

谢谢你。

4

6 回答 6

2

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

精细上传 PHP

于 2012-11-18T17:31:51.740 回答
1

删除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);
于 2012-11-27T11:50:11.147 回答
1

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

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

希望这可以帮助某人。

于 2013-01-09T09:59:54.703 回答
1

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

<?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。

于 2013-01-25T23:25:44.643 回答
1

我也有上传到文件夹的问题。为了获得更多信息，我将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/'); 问题已为我解决。

于 2013-01-30T22:33:02.963 回答
0

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

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

1) move_upload_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

于 2012-11-09T20:11:12.620 回答