Настроить кнопку для плагина формы JQuery

У меня есть форма, в которой я загружаю файл с помощью JQuery Form Plugin. Я хотел бы настроить кнопку загрузки и отправить ее в onchange. Ниже вы можете видеть, что я скрыл форму и заменил ее ссылкой # upfile1.

<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
 <a href="#" id="upfile1" target="_blank">Import .csv</a>
 
</form>

Затем в моем JQuery я моделирую щелчок формы следующим образом:

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

Однако, похоже, что смешивание этого и плагина формы JQuery не работает. Страница снова загружается с добавлением "/submit" в конец URL-адреса.

Вот 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;
})();
1 ответ

Вы должны отправить форму, а не ввод. Попробуй это:

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

Документацию для jQuery submit можно найти здесь.

Я лучше понимаю ваш вопрос, извините за путаницу! Html:

<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; }

Скрипка.

Очевидно, добавьте стили, которые вы хотите сделать хорошо выглядящими.

licensed under cc by-sa 3.0 with attribution.