使用blueimp jquery文件上传实现自定义的文件上传按钮

Question

我正在使用jQuery文件上传插件，但是只要我在输入框中选择文件，它就会立即上传我的文件。

我想要一个自定义提交按钮来上传文件。

我该怎么做？

标记：

<span>Add File</span>
<input id="fileupload" type="file" multiple="" data-url="upload.ashx" name="files[]" />

<label for="file_name">Name:</label>
<input type="text" name="file_name" id="file_name" />

<input type="button" id="uploadFileBtn" value="Upload" />

Javascript（简称JS）：

$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data) {
    alert("success");                               
}
});

- ffffff01

Answer 1

你可以通过钩入“add”事件来实现。在那里，你可以阻止上传程序执行其默认行为。《jquery-file-upload》文档对此进行了解释，但有点难以找到。

以下内容写在blueimp基本上传器教程中：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

实际上非常重要的是，您创建的提交按钮不应该在表单内部！

- schmijos

Answer 2

你的输入是否在同一个表单中？

更改你的代码：

<form id="fileupload" action="someAction" method="POST" enctype="multipart/form-data">
    <span>Add files</span>
    <input type="file" name="files[]" multiple>
    <button type="submit" class="btn btn-primary start">
        <span>Start upload</span>
    </button>
</form>

- john 4d5

Answer 3

解决方案

文件上传具有添加事件，该事件在选择文件后立即触发。我将我的单击事件写在ADD事件内，从而覆盖了默认行为。

测试过了，按预期工作。

解决方案2 - Jquery表单插件

经过一些研究，我找到了更好的处理ajax文件上传的方法。我正在使用Jquery表单插件，该插件位于：http://www.malsup.com/jquery/form/

它就像普通表单一样工作，并且可以处理文件输入。

- ffffff01

---

@martin-g 看看这个问题怎么做：https://dev59.com/YWYr5IYBdhLWcg3w6OKd - Dirty-flow

我找到了另一种更好的处理ajax文件上传的方法。我正在使用jquery表单插件。它就像普通表单一样工作，并且可以处理文件输入。http://www.malsup.com/jquery/form/ - ffffff01