Насочване към бутона „Отвори“ при качване на формуляр

От естетически причини исках да добавя скрита файлова форма към моя HTML документ. В крайна сметка, в стила на Facebook, бих искал, когато потребителят щракне върху „Отвори“ след избор на файл, автоматично да публикувам тези изображения на друга страница, където се показват миниатюри и всяко изображение има свързани формуляри, които потребителят може да редактира. Аз съм нов в уеб разработката, уча на Laravel 5.2.

Използвах jQuery, за да създам събитие, когато потребителят кликне върху връзката:

$(document).ready(function () {    
    $("#uploadAlbumLink").on('click', function (e) {
        e.preventDefault();
        $("#selectImages").trigger('click');
    });
})

Това работи добре, но не знам как да насоча бутона „Отвори“ в прозореца за избор на файл, така че да се задейства допълнително събитие, което активира изпращането на формуляр. Как бих направил това? Има ли друг подход, който се препоръчва?


forms html jquery file-upload
person Josef    schedule 12.07.2016    source източник
comment
Файловете, избрани от потребителя, трябва да бъдат качени, когато потребителят изпрати form   -  person guest271314    schedule 12.07.2016
comment
Изпращането също е скрито. Исках елементът ‹a› и бутонът за избор на файл „Отваряне“ да се погрижат за тези задачи чрез функция jQuery или нещо подобно.   -  person Josef    schedule 12.07.2016

Отговори (1)


arrow_upward
0
arrow_downward

Ако <input type="file"> елемент има набор от name атрибути, можете да използвате change събитие в <input type="file"> елемент, за да изпратите родителски <form> елемент, като изберете затваря родителския form елемент, използвайки .closest(), .submit(), когато потребителят избира файлове. Въпреки че позволява на потребителя да изпрати form, действието на потребителя вероятно ще бъде по-ясна индикация за потребителя, че качените файлове ще бъдат изпратени на сървър.

$("#selectImages").change(function(e) {
  if (e.target.files.length) {
    $(this).closest("form").submit()
  }
})
person guest271314    schedule 12.07.2016