无法绑定按钮时如何提交blueimp jquery文件上传到外部

Question

我正在调查 jquery 文件上传，但无法提交。先说一下流程再发

用户选择了一张他们想要更改的图片
这会在输入上触发更改事件
图像是在定制的图像裁剪器中呈现的
如果用户在选择移动图像后接受裁剪更改 about/zooming 等，则需要将图像提交给服务器

问题：在选择图像之前，该按钮不会呈现在页面上。我尝试执行以下操作：

首先，在包含文件输入的表单的页面呈现完成时实例化插件，因为它始终在页面上。是隐藏表格。

$el.fileupload({
     url: self.uploadImageUrl,
     autoUpload: true,
     add: function (e, data) {
           if (beforeUpload(data, e))
                 data.submit();
     },
     error: function (jqXHR, textStatus, errorThrown) {
                    helper.Logger.error(errorThrown);
     }
});

如果满足以下条件，beforeUpload 函数基本上 return 为真： - 图像裁剪器模板当前显示在屏幕上 - 图像 src 与裁剪器中当前的 src 匹配否则，它 return 是错误的。

当时的想法是，当用户第一次选择图像时，beforeUpload() 变为 false，因为图像裁剪器未呈现。这将允许用户进行裁剪，然后单击接受按钮，我只是简单地做：

$inputFileButtonWithinFileUploadForm.change()

这将运行通过 beforeUpload 这一次将 return 为真，导致插件将表单连同其他数据一起发送。（我想连同文件一起提交裁剪细节）

不幸的是，无论出于何种原因，插件都忽略了输入元素上的 .change() 。

我只能看到一个感觉很脏的解决方案 - 有两个输入，一个用于图像选择，另一个用于表单。当用户接受图像时，表单输入会更新。如果可能的话，我想要一个更清洁的解决方案。我不明白为什么插件不只是有一个不需要参数的 .submit() 方法 - 它已经知道表单。我在 API 中看到了一个提交方法，但它需要文件作为参数，我想同时发送文件和裁剪数据 - 这可能吗？

谢谢

Answer 1

在这里找到答案：jQuery file upload: Is it possible to trigger upload with a submit button?

基本上，用

绑定表单

               add: function (e, data) {
                    options.onFileAdd(data, e);

                    $el.on(customEventName, function () {
                        data.submit();
                    });                            
                },

然后是外部按钮：

$btn.on("click", function() { $yourForm.trigger("customEventName"); })

无法绑定按钮时如何提交blueimp jquery文件上传到外部

How to submit blueimp jquery file upload externally when I can't bind the button

jquery

file-upload

blueimp