标签: fine-uploader

我想将可以在存储桶中删除的文件数量限制为一个文件。我发现了验证指令和itemLimit属性。但是，当我将其设置为1时，它实际上什么也没做。这是我用来创建精细上传实例的代码：

谢谢您的帮助！

                $(this).fineUploader({
                    request: {
                        endpoint: 'api/endpoint.php'
                    },
                    validation: {
                        itemLimit: 1
                    },
                    autoUpload: true,
                    text: {
                        uploadButton: 'DROP ASSET HERE',
                    },
                    debug: false
                })
                    .on('complete', function(event, id, fileName, response) {

                });

我正在使用fineuploader 3.2版.我在这样的HTML页面上嵌入了多个fineuploader实例

<div id="file-uploader_1" class="uploader">
<div id="file-uploader_2" class="uploader">

这就是我如何附加fineuploader

$('.uploader').fineUploader({
request: {
    endpoint: './uploadfile',
    params: {
    imageid: function() {
        return this.id;
     }
    }
},
multiple: false,
validation: {
    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
    sizeLimit: 551200 // 50 kB = 50 * 1024 bytes
},
text: {
    uploadButton: 'Changepic'
}
}).on('complete', function(event, id, fileName, responseJSON) {
if (responseJSON.success) {
    imgs[this.id]="data:image/jpg;base64,"+ data;
}
});

我想将附加到fineuploader的div的id传递给fileupload请求.但是我发现在引用'this.id'的地方会返回'undefined'.我也尝试使用this.attr('id')而得到一个错误"Uncaught TypeError:Object#have method'attr'".

我在这里发现了一个类似的问题(FINEUPLOAD将ID作为参数传递)但是解决方案似乎太粗糙了.有人可以提出更好的解决方案,而不是重复相同的代码吗？

我阅读了https://docs.fineuploader.com/branch/master/features/modules.html
所以我完成了以下步骤:

-fine uploader通过安装npm install fine-uploader --save

-加入.angular-cli.json

"styles": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.min.css"
],
"scripts": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader.min.js"
],

-创建精细的上传器实例

/// <reference types="fine-uploader" />
import { FineUploaderBasic } from 'fine-uploader/lib/core';
import { UIOptions } from 'fine-uploader';

private fineUploader: FineUploaderBasic;
private fineUploaderOptions: UIOptions;

ngOnInit() {      

  this.fineUploaderOptions = {
    validation: {
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
      sizeLimit: 50 * 1024 * 1024, // 50 KB
    },
    element: this.elementRef.nativeElement.querySelector('[fine-uploader]')
  };
  this.fineUploader = new FineUploaderBasic(this.fineUploaderOptions);
  this.fineUploader.setEndpoint('/api/User/UploadImage');
}

但它还没有奏效!没有任何登录浏览器的控制台

我的组件完全:

/// …

首先,我想说我的英语不好,所以我要道歉.我的问题是我试图自定义FineUploader FileTemplate选项但没有成功.我不想使用fineUploaderBasic.我想要完全定制.首先,我试图在上传成功后隐藏文件名和大小,并且我成功地完成了它,但是当我尝试自定义删除按钮时,问题就开始了.上传后删除按钮出现但已禁用,我无法单击它.下面是我的代码:

var restricteduploader = new qq.FineUploader({
                        element: $('#restricted-fine-uploader')[0],
                        text: {
                            uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
                            deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
                        },

                        template:
                        '<div class="qq-uploader">' +
                            '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
                            '<div class="qq-upload-button">{uploadButtonText}</div>' +
                            '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                            '<ul class="qq-upload-list"></ul>' +
                        '</div>',
                        fileTemplate:
                            '<li>' +
                                '<div class="qq-progress-bar"></div>' +
                                '<span class="qq-upload-spinner"></span>' +
                                '<span class="qq-upload-finished"></span>' +
                                '<span class="qq-edit-filename-icon"></span>' +
                                '<span class="hide-file"></span>' +
                                '<div>IMAGEN SUBIDA CON EXITO!!</div>' +
                                '<input class="qq-edit-filename" tabindex="0" type="text">' +
                                '<span class="hide-size"></span>' +
                                '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
                                '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' …

我试图找出Fine Uploader是否可以限制允许的图像总量.因此,假设我想将图像限制为5并且用户拖放或选择6个图像,它将提示用户说由于仅允许最多5个图像而无法完成.

我一直在看文档,但我可能错过了它.

这是我上传图像配置文件的指令。它工作正常，但我想知道的是我们如何过滤这个指令以仅允许特定的扩展名，因为我只想允许图像。顺便说一句，我正在使用fineupload。请随意询问图像 url 下面的代码是 e.target.result。

app.directive('uploadProfile', function () {
        return function (scope, element, attrs, $window) {
            var $uploadCrop;

            function readFile(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('.cropper').addClass('ready')
                        $window.alert("hi")
                        $uploadCrop.croppie('bind', {
                            url: e.target.result

                        }).then(function () {
                            console.log("do nothing")
                        });
                    }

                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    swal("Sorry - you're browser doesn't support the FileReader API");
                }
            }


            $(element).on("change", function () {
                readFile(this)
            });

            $uploadCrop = $('.cropper').croppie({
                url: "/static/img/yahshua.jpg",
                viewport: {
                    width: 170,
                    height: 170, …

我已经搜索了FineUploader文档,但是当我设置我的上传按钮文本时,下面的更改似乎没有传播.上传按钮仍显示默认文本.我错过了什么？

var manualuploader = new qq.FileUploader({
        element: document.getElementById('manual-fine-uploader'),
        text: {
            uploadButton: "Select a File" // <========== Setting text here
        },
        action: "/file/upload",
        autoUpload: false,
        multiple: false,
        forceMultipart: true,
        onComplete: function (id, fileName, json) {

            $("#divFileUploadLoading").hide();
            $("#buttonUploadFile").show();

            if (json.success) {

                displaySuccessMessage("Successfully uploaded: " + fileName);

                $("#textFileTitle").val("");
                $("#textFileDescription").val("");
                $("#checkIsDownloadable").prop("checked", true);
                $("#checkDisplayDetails").prop("checked", true);
            }
            else {

                displayErrorMessage("Failed to upload: " + fileName + " because '" + json.errorMessage + "'");
            }

            g_FileCount = 0;

            manualuploader.clearStoredFiles();
            manualuploader.reset();
        },
        onSubmit: function (id, fileName) {

            g_FileCount++; …

有没有办法阻止onError回调被触发的警报？

我只需要捕获错误并以不同的方式显示它

我的Fine Uploader实现-使用核心模式和jQuery-可以正常工作，直到我尝试上传第二批文件。

当第一批文件成功上传后，我可以单击按钮添加文件，然后弹出对话框选择文件。但是，在确认文件选择后，什么也没有发生。

complete处理程序中的以下代码引起了问题：

$('#attachments-upload').button('reset'); // Bootstrap stateful button

#attachments-upload是也设置为button:选项的按钮的ID 。这是完整的JS代码清单：

$('#attachments-list').fineUploader({
    uploaderType: 'basic',
    button: $('#attachments-upload'),
    debug: true,
    request: {
        endpoint:   $route_atatachments_upload,
        inputName: 'attachments'
    },
    validation: {
        allowedExtensions: ['png', 'jpeg', 'gif', 'pdf', 'doc', 'bmp'],
        sizeLimit: 10485760 // 10MB
    }
})
.on('upload', function(event, id, fileName) {

    $('#attachments-upload-error').hide();
    $('#attachments-upload').button('loading');
    $('#attachments-upload-progress').show().attr('aria-valuenow', 0);

})
.on('progress', function(event, id, fileName, loaded, total) {

    if (loaded < total) {
        var progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total …