Fine Uploader 无法上传文件
Posted
技术标签:
【中文标题】Fine Uploader 无法上传文件【英文标题】：Fine Uploader cannot upload the file 【发布时间】：2012-10-30 04:37:06 【问题描述】：我正在使用文件上传器 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" > ' +
'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" > ' +
'Uploading ' +
'“' + fileName + '” ' +
progress);
else
$('#file-' + id).addClass('alert-info')
.html('<img src="client/loading.gif" > ' +
'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" >');
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 上，但我不知道我做错了什么。在我发疯之前请帮忙。
谢谢。
【问题讨论】：
表示文件无法上传，错误为未定义。该文件夹具有正确的权限和所有权限。我不明白为什么它不起作用。 【参考方案1】：我没有阅读您的 js 和 html 部分，但您需要更改您的 PHP 部分。 看看他是怎么做到的
fine-uploader PHP
【讨论】：
@RayNicholus，你指的是github中的哪个php文件？ @Stranger 此答案由 TianLoon 提供。我只是更新了原始链接，因为它已损坏。 好的，但是你知道他说的是哪个文件吗？ @RayNicholus，你介意帮我解决上传问题吗？ @Stranger 请打开一个描述您的问题的新线程并将其标记为“fine-uploader”。【参考方案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);
【讨论】：
【参考方案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();
希望这对某人有所帮助。
【讨论】：
我遵循了这个例子，但文件上传器没有显示在我的 UI 中。关于为什么会发生这种情况的任何提示？【参考方案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。
【讨论】：
您发布的 php 是否名为“example.php”？【参考方案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/'); 问题已为我解决。
【讨论】：
【参考方案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
【讨论】：
不，很好：D 跟随他发布的链接 我使用的是很好的上传器，但是我只是尝试了你的建议，没有任何改变。我仍然遇到同样的错误/问题。以上是关于Fine Uploader 无法上传文件的主要内容，如果未能解决你的问题，请参考以下文章