Question

我有一个表单，我使用JQuery Form Plugin上传文件。我想自定义上传按钮并让它提交onchange。下面你可以看到我隐藏了表单并用＃upfile1链接替换它。

<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
    <a href="#" id="upfile1">Import .csv</a>
    <input type="file" name="myfile" id="myFile" style="display:none" onchange='this.form.submit()'/>
</form>

然后在我的JQuery中，我模拟单击表单：

$("#upfile1").click(function () {
    $("#myFile").trigger('click');
});

但是，似乎混合使用此JQuery Form插件并不起作用。页面再次加载，并在URL的末尾添加了“/ submit”。

以下是Form Plugin中的JQuery：

(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#dataform').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function(data) {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);

       //Do some stuff

    },
complete: function(xhr) {
    status.html(xhr.responseText);
}
//
}); 
return false;
})();

Answer 1

您必须提交表单，而不是输入。试试这个：

$("#upfile1").click(function (e) {
    e.preventDefault();
    $("#dataform").submit();
});

可以找到jQuery提交的文档here。

我更了解你的问题，对不起有困难！ html：

<input type="file" id="fileInput" multiple>
<button id="fileButton">Select some files</button>

jQuery：

document.querySelector('#fileButton').addEventListener('click', function(e) {
    // Use the native click() of the file input.
    document.querySelector('#fileInput').click();
}, false);

CSS：

#fileInput { visibility:hidden; }

fiddle。

显然，添加你想要的样式让它看起来不错。

自定义JQuery Form Plugin的按钮

1 个答案: