Mam prosty formularz przesyłania plików. Jak ustawić automatyczne przesyłanie po wybraniu pliku? Nie chcę, aby użytkownik musiał klikać przycisk Prześlij.
Mam prosty formularz przesyłania plików. Jak ustawić automatyczne przesyłanie po wybraniu pliku? Nie chcę, aby użytkownik musiał klikać przycisk Prześlij.
Odpowiedzi:
Możesz po prostu wywołać submit
metodę swojego formularza w onchange
przypadku wprowadzenia pliku.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
Submit()
wywołanie wyzwala submit
zdarzenie jQuery , ale nie uruchamia podstawowego formularza submit()
. Możesz oczywiście użyć $('form')[0].submit()
do trafienia elementu DOM za pomocą jQuery
Po prostu powiedz file
-input, aby automatycznie przesłał formularz po każdej zmianie:
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>
To rozwiązanie działa tak:
onchange
powoduje, że element wejściowy wykonuje następujący skrypt, po każdej value
modyfikacjiform
odwołuje się do formularza, którego częścią jest ten element wejściowysubmit()
powoduje, że formularz wysyła wszystkie dane na adres URL określony w action
Zalety tego rozwiązania:
id
s. Ułatwia życie, jeśli masz kilka formularzy na jednej stronie html.Korzystanie z jQuery:
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>
JavaScript ze onchange
zdarzeniem:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
jQuery
.change()
oraz .submit()
:
$('#fileInput').change(function() {
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>
<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>
To jest moje rozwiązanie do przesyłania obrazów, gdy użytkownik wybrał plik.
Część HTML:
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
JavaScript:
document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
var upload = document.getElementById('img_input');
var image = upload.files[0];
$.ajax({
url:"/foo/bar/uploadPic",
type: "POST",
data: new FormData($('#img_form')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
};
Wypróbuj poniższy kod z jQuery:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#myForm').on('change', "input#MyFile", function (e) {
e.preventDefault();
$("#myForm").submit();
});
});
</script>
<body>
<div id="content">
<form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
<input type="file" id="MyFile" value="Upload" />
</form>
</div>
</body>
</html>
Dla tych, którzy używają .NET WebForms, przesyłanie całej strony może nie być pożądane. Zamiast tego użyj tego samego onchange
pomysłu, aby javascript kliknął ukryty przycisk (np. <Asp: Button ...), a ukryty przycisk może zająć resztę. Upewnij się, że robisz display: none;
na przycisku, a nie Visible="false"
.
HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>
<form action="http://example.com">
<input type="file" onchange="Submit()" />
</form>
<script>
// it will submit form 0 or you have to select particular form
document.getElementsByTagName("form")[0].submit();
</script>
Możesz umieścić ten kod, aby kod działał tylko z jedną linią kodu
<input type="file" onchange="javascript:this.form.submit()">
Spowoduje to przesłanie pliku na serwer bez klikania przycisku przesyłania