Jak mieć jQuery ograniczyć typy plików przy wysyłaniu?
Chciałbym, aby jQuery ograniczyło pole przesyłania plików tylko do jpg / jpeg, png i gif. Sprawdzam już backend z PHP
. Uruchamiam przycisk submit za pomocą funkcji JavaScript
, więc naprawdę muszę wiedzieć, jak sprawdzić typy plików przed submit lub alert.
13 answers
Możesz uzyskać wartość pola file tak samo jak każde inne pole. Nie można go jednak zmienić.
Więc aby powierzchownie sprawdzić czy plik ma odpowiednie rozszerzenie, możesz zrobić coś takiego:
var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-14 17:31:34
Brak wtyczki niezbędnej do tego zadania. Poukładałem to z kilku innych skryptów:
$('INPUT[type="file"]').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
$('#uploadButton').attr('disabled', false);
break;
default:
alert('This is not an allowed file type.');
this.value = '';
}
});
Sztuczka polega na ustawieniu przycisku przesyłania na wyłączone, dopóki nie zostanie wybrany prawidłowy typ pliku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-28 00:11:48
Możesz użyć wtyczki walidacji dla jQuery: http://docs.jquery.com/Plugins/Validation
Zdarza się, że reguła accept() robi dokładnie to, czego potrzebujesz: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension
Zauważ, że kontrolowanie rozszerzenia pliku nie jest wypunktowane, ponieważ nie jest w żaden sposób powiązane z typem MIME pliku. Więc możesz mieć .png czyli dokument word i a .doc to doskonale poprawny obraz png. Więc nie zapomnij zrobić więcej kontrolek po stronie serwera;)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-21 14:02:16
Nie chcesz sprawdzać raczej na MIME niż na jakimkolwiek rozszerzeniu, które użytkownik kłamie? Jeśli tak to jest mniej niż jedna linijka:
<input type="file" id="userfile" accept="image/*|video/*" required />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-28 14:41:00
Dla front-endu jest całkiem wygodne, aby umieścić atrybut 'accept', Jeśli używasz pola pliku.
Przykład:
<input id="file" type="file" name="file" size="30"
accept="image/jpg,image/png,image/jpeg,image/gif"
/>
Kilka ważnych uwag:
- Atrybut accept jest obsługiwany w przeglądarkach Internet Explorer 10, Firefox, Opera, Chrome i Safari 6.
- wyświetli tekst dla rozszerzenia pliku inaczej w oknie dialogowym przeglądarki plików z różnych przeglądarek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:35
W moim przypadku użyłem następujących kodów:
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {
alert('You must select an image file only');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-16 11:26:54
Próbuję napisać działający przykład kodu, testuję go i wszystko działa.
Zając to kod:
HTML:
<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />
Javascript:
//function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
var val = $(element).val(); //get file value
var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention
if ($.inArray(ext, extentionsArray) == -1) {
alert('false extension!');
}
var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
if (fileSize > maxSize) {
alert("Large file");// if Maxsize from Model > real file size alert this
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-11 09:38:10
Ten kod działa dobrze, ale jedynym problemem jest to, że jeśli format pliku jest inny niż określone opcje, wyświetla komunikat alertu, ale wyświetla nazwę pliku, podczas gdy powinien być zaniedbany.
$('#ff2').change(
function () {
var fileExtension = ['jpeg', 'jpg', 'pdf'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
return false; }
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-20 22:52:33
Ten przykład umożliwia przesyłanie tylko obrazu PNG.
HTML
<input type="file" class="form-control" id="FileUpload1" accept="image/png" />
JS
$('#FileUpload1').change(
function () {
var fileExtension = ['png'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.png' format is allowed.");
this.value = ''; // Clean field
return false;
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-20 23:01:35
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-28 02:40:02
Jeśli masz do czynienia z wielokrotnym (html 5) uploadowaniem plików, wziąłem sugerowany komentarz i trochę go zmodyfikowałem:
var files = $('#file1')[0].files;
var len = $('#file1').get(0).files.length;
for (var i = 0; i < len; i++) {
f = files[i];
var ext = f.name.split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
alert('invalid extension!');
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-09 21:18:26
function validateFileExtensions(){
var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
var fileErrors = new Array();
$( "input:file").each(function(){
var file = $(this).value;
var ext = file.split('.').pop();
if( $.inArray( ext, validFileExtensions ) == -1) {
fileErrors.push(file);
}
});
if( fileErrors.length > 0 ){
var errorContainer = $("#validation-errors");
for(var i=0; i < fileErrors.length; i++){
errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
}
return false;
}
return true;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-26 12:07:13
Oto prosty kod do walidacji javascript, a po jego walidacji wyczyści plik wejściowy.
<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>
function validate(file) {
var ext = file.split(".");
ext = ext[ext.length-1].toLowerCase();
var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];
if (arrayExtensions.lastIndexOf(ext) == -1) {
alert("Wrong extension type.");
$("#image").val("");
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-20 13:23:52