我最近在我们的Rails应用程序中安装了Fine Uploader.我已经阅读了文档并对它进行了一些实验,但我似乎并不了解这个东西是如何工作的,因此,我在实现它时遇到了很多问题.
我做了什么:安装它(两种方式,一种是"经典",第二种是使用fineuploader gem,它似乎也是这样).
创建了一个包含此文件的咖啡文件.
$ ->
uploader = new (qq.FineUploader)(
debug: true
element: document.getElementById('fine-uploader')
request: endpoint: '/uploads')
template: 'test-template'
Run Code Online (Sandbox Code Playgroud)
这会创建一个"上传文件"按钮(这当然不起作用,因为在服务器站点上没有配置来处理这个),但我希望在简单形式的输入字段中有这个按钮.
此外,模板不起作用,我真的不明白为什么.
不幸的是,文档缺乏对Rails的帮助.
我愿意将这个库更改为其他内容,只要它包含我需要的功能:
看起来像Andrew Valums构建的两个库.他们似乎都拥有相同的许可证(GNU GPL v3).
文件上传器可以轻松下载,但对于精美的上传器,我必须提供我的email地址下载,它将允许我免费使用它45天.
截至目前,似乎我能够在github上克隆这两个.
我的问题是,我可以在我的客户项目中使用这两个库或其中一个库而无需获得商业许可吗?
我实现了FineUploader,我希望在上传所有文件后将我的客户端脚本连接到一个事件.那可能吗?
我的实现如下.只是想知道这是否是正确的方向.
function init() {
var uploader = new qq.FineUploader({
element: document.getElementById('button-selectfiles'),
request: {
endpoint: '/Up/UploadFile'
},
callbacks: {
onStatusChange: onFileUploadStatusChange
}
});
};
var uploads = 0;
function onFileUploadStatusChange(id, oldStatus, newStatus) {
console.log(newStatus);
if (newStatus === 'submitting') {
uploads++;
}
if (newStatus === 'upload successful' || newStatus === 'upload failed') {
uploads--;
}
if (uploads === 0) {
console.log('done');
}
}
Run Code Online (Sandbox Code Playgroud) 有谁知道是否可以使用Fine Uploader上传到S3存储桶内的文件夹?我尝试在请求端点添加'\ foldername',但没有运气.
谢谢.
我已经实现了FileUploader 4.4,它在使用Coldfusion上传多个文件时非常有效.
终点代码非常简单,如下所示:
<cffile action="upload"
destination="#application.Config.imageDir#"
nameconflict="overwrite"
filefield="FORM.qqFile" />
<cfif CFFILE.contenttype EQ "image" OR ListFindNoCase("jpg,jpeg,gif,png", CFFILE.serverFileExt)>
<cfset local.fileName = CFFILE.serverFile />
</cfif>
Run Code Online (Sandbox Code Playgroud)
每当我上传单个或多个图像时,local.filename变量都会正确设置为您通常在qqfilename中看到的图像文件名值,例如"image0001.jpg"
发送此数据的javasript代码很简单:
$('#fine-uploader').fineUploader({
request: {
endpoint: '<cfoutput>#application.Config.fineUploaderProxy#?cfc=#cfcName#&functionName=#functionName#</cfoutput>'
}
});
Run Code Online (Sandbox Code Playgroud)
但是,只要我添加缩放,就会开始出现奇怪的行为.缩放版本被发送到我的上传处理程序,但是,正在发送的文件名对于每个缩放图像始终是"blob",而不是我期望的名称,类似于"image0001(small).jpg"
我添加的用于激活缩放的代码很简单:
$('#fine-uploader').fineUploader({
scaling: {
sizes: [
{name: "small", maxSize: 50}
]
},
request: {
endpoint: '<cfoutput>#application.Config.fineUploaderProxy#?cfc=#cfcName#&functionName=#functionName#</cfoutput>'
}
});
Run Code Online (Sandbox Code Playgroud)
有人可以帮助我,为什么文件名"blob"与qqfile而不是实际的文件名?我使用的是最新版本的Chrome.
谢谢
我想在我的Laravel项目中使用这个包https://github.com/FineUploader/php-traditional-server/.所以我修改了composer.json这样的文件:
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"fineuploader/php-traditional-server": "1.0.0"
}
Run Code Online (Sandbox Code Playgroud)
并运行compose update命令.但是如何UploadHandler在Controller上使用类(在包的handler.php中声明)?
我正在尝试使用fineuploader with react并安装了所有相关的依赖项.以下是我使用的代码: -
import React, { Component } from 'react'
import FineUploaderTraditional from 'fine-uploader-wrappers'
import Gallery from 'react-fine-uploader'
import 'react-fine-uploader/gallery/gallery.css'
const uploader = new FineUploaderTraditional({
options: {
chunking: {
enabled: true
},
deleteFile: {
enabled: true,
endpoint: '/uploads'
},
request: {
endpoint: '/uploads'
},
retry: {
enableAuto: true
}
}
})
class UploadComponent extends Component {
render() {
return (
<Gallery uploader={uploader} />
)
}
}
export default UploadComponentRun Code Online (Sandbox Code Playgroud)
但我得到以下错误: -
Uncaught Error: Element type is invalid: expected a …Run Code Online (Sandbox Code Playgroud) 我正在使用jquery插件的精细上传器.需要在上传文件之前动态传递params,因此,setParams()方法应该完成这项工作.我在onSubmit回调中没有例外:
1)上传者声明
function initUploader() {
var up = $('#BSUploader').fineUploader({
multiple: true,
debug: true,
request: {
endpoint: '${request.contextPath}/quantum/uploadToS3',
//params: {'folderId':r }
},
dragAndDrop: {
extraDropzones:[$('#filesContainer')],
Run Code Online (Sandbox Code Playgroud)
...
2)onSubmit回调
...
}).on('submit', function(event, id, name) {
var r = $("#curfolderid").val();
alert(r);
up.setParams({'folderId':r});
Run Code Online (Sandbox Code Playgroud)
3)错误日志
[FineUploader] Caught exception in 'onSubmit' callback - Object [object Object] has no method 'setParams' bundle-bundle_uploader_defer.js:4
qq.log bundle-bundle_uploader_defer.js:4
qq.FineUploaderBasic.log bundle-bundle_uploader_defer.js:26
b bundle-bundle_uploader_defer.js:47
a._options.callbacks.(anonymous function) bundle-bundle_uploader_defer.js:47
qq.FineUploaderBasic._upload bundle-bundle_uploader_defer.js:43
qq.FineUploaderBasic._uploadFileOrBlobDataList bundle-bundle_uploader_defer.js:43
qq.FineUploaderBasic.addFiles bundle-bundle_uploader_defer.js:29
qq.DragAndDrop.callbacks.dropProcessing bundle-bundle_uploader_defer.js:69
b bundle-bundle_uploader_defer.js:51
qq.UploadDropZone.onDrop bundle-bundle_uploader_defer.js:52
(anonymous function)
Run Code Online (Sandbox Code Playgroud)
任何的想法 ?
我刚刚下载了 Fine Uploader 4.0 的新“自定义版本”。我的页面在几周前安装和设置的 3.9 上运行良好。
我的代码:
Click "Select Files" and pick the files you would like to upload. Then click "Upload Now" to start the transfer.
<hr>
<div id="fineuploader-s3"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<i class="icon-upload icon-white"></i> Upload now
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://xxxxxxx/fineuploader-4.0.3/custom.fineuploader-4.0.3.js"></script>
<script>
$(document).ready(function () {
var manualuploader;
function check_done() {
if (allUploadsCompleted() === true) {
var successUrl = "http://xxxxxxxx/FineUploadComplete?ftpSessionId=xxxxxx";
$.get( successUrl );
alert('Your upload is complete.');
window.top.location = "xxxxxxxx";
}
}
function allUploadsCompleted() { …Run Code Online (Sandbox Code Playgroud) 我正在使用FineUploader并且已经弄清楚如何将图像上传到服务器。
$(document).ready(function() {
$('#fine-uploader-gallery').fineUploader({
template: 'qq-template-gallery',
request: {
endpoint: "./vendor/fineuploader/php-traditional-server/endpoint.php"
},
deleteFile: {
enabled: true,
endpoint: "./vendor/fineuploader/php-traditional-server/endpoint.php"
},
chunking: {
enabled: true,
concurrent: {
enabled: true
},
success: {
endpoint: "./vendor/fineuploader/php-traditional-server/endpoint.php?done"
}
},
resume: {
enabled: true
},
retry: {
enableAuto: true,
showButton: true
},
thumbnails: {
placeholders: {
waitingPath: './node_modules/fine-uploader/jquery.fine-uploader/placeholders/waiting-generic.png',
notAvailablePath: './node_modules/fine-uploader/jquery.fine-uploader/placeholders/not_available-generic.png'
}
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
}
});
});
Run Code Online (Sandbox Code Playgroud)
现在,当用户刷新页面或最初加载页面时,我希望指定文件夹中的图像显示在上传区域中。我怎样才能做到这一点?
fine-uploader ×10
javascript ×5
amazon-s3 ×1
coldfusion ×1
file-upload ×1
jquery ×1
laravel ×1
reactjs ×1
upload ×1