如何使用 Valums Ajax File-Uploader 触发上传文件？答案

【问题标题】：How can I trigger the upload file with Valums Ajax File-Uploader?如何使用 Valums Ajax File-Uploader 触发上传文件？
【发布时间】：2012-06-09 02:47:43
【问题描述】：

使用 Valums Ajax 文件上传器时，如何触发上传？

默认行为是在用户选择文件后立即开始上传。我想防止这种情况发生，而是在用户选择文件后单击单独的“上传”按钮时触发上传。

我查看了代码，发现上传从文件输入附加的change 事件开始。我首先将return false; 添加到onSubmit 函数，然后将点击事件附加到另一个触发更改事件的按钮：

$('#startUpload').on('click', function() {  
    // some conditionals
    $('input[name="file"]').trigger('change');  
});

这行不通。它只是再次打开文件菜单。

如何防止在用户选择文件后立即进行上传，而是在用户单击另一个按钮时触发它？

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

您必须为此修改 file-uploader.js 文件。在第 309 行，修改 onChange 函数以返回 false。然后在上面添加如下函数，这样代码就变成了：

startUpload: function(){
    this._onInputChange(this._button.getInput());
},
_createUploadButton: function(element){
    var self = this;

    return new qq.UploadButton({
        element: element,
        multiple: this._options.multiple && qq.UploadHandlerXhr.isSupported(),
        onChange: function(input){
            return false;
        }
    });
},

然后在您的 HTML 文件中，在您的按钮单击或任何其他事件中，调用

uploader.startUpload();

其中 uploader 是您的 qq.FileUploader() 对象的名称。

希望有帮助:)

【讨论】：

Fine Uploader当前版本支持通过API手动触发上传。无需再修改代码。

【解决方案2】：

Valums Ajax 文件上传器现在支持此功能。您可以对文件进行排队并在按钮单击时触发上传

 var uploader2 = new qq.FileUploader({
    element: $('#manualUploadModeExample')[0],
    action: "success.html",
    autoUpload: false,
    demoMode: true,
    uploadButtonText: "Select Files"
});

$('#triggerUpload').click(function() {
    uploader2.uploadStoredFiles();
});

有关更多信息，请查看此链接：valums file uploder

【讨论】：

此解决方案适用于 Valums 精细上传器，而不是 Valumns 文件上传器
@Sanchitos：我没有找到诸如 Valums “好的”上传器之类的东西。我确定它是 Valums “文件”上传器
从第 2 版起，它被称为 Fine Uploader：fineuploader.com，尽管 github 项目仍称为“fileuploader”。
Github 项目现在是 Fine-uploader，特别是 Widen/fine-uploader。