Я использую uploadify для загрузки файлов с помощью Codeigniter. И перед загрузкой файла мне просто нужно проверить правильность правильного расширения файла или нет. Я пробовал с http://jquery.bassistance.de/, а также http://forum.jquery.com/
Бур не получил должного результата. Кто-нибудь может сказать мне, как я могу сделать то же самое?
Спасибо заранее...
Я хотел бы поблагодарить человека, который отправил ответ, но он удалил сообщение. Мы можем сделать это так.
$("#yourElem").uploadify({
'uploader': ...,
'script': ...
'fileExt' : '*.jpg;*.gif;', //add allowed extensions
.....,
'onSelect': function(e, q, f) {
var validExtensions = ['jpg','gif']; //array of valid extensions
var fileName = f.name;
var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
if ($.inArray(fileNameExt, validExtensions) == -1){
alert("Invalid file type");
$("#yourElem").uploadifyCancel(q);
return false;
}
}
});
Спасибо за ответ, он действительно сработал...
Если вы хотите сделать это без плагина, вы можете использовать следующее.
Javascript, используя jQuery:
$(document).ready( function (){
$("#your_form").submit( function(submitEvent) {
// get the file name, possibly with path (depends on browser)
var filename = $("#file_input").val();
// Use a regular expression to trim everything before final dot
var extension = filename.replace(/^.*\./, '');
// Iff there is no dot anywhere in filename, we would have extension == filename,
// so we account for this possibility now
if (extension == filename) {
extension = '';
} else {
// if there is an extension, we convert to lower case
// (N.B. this conversion will not effect the value of the extension
// on the file upload.)
extension = extension.toLowerCase();
}
switch (extension) {
case 'jpg':
case 'jpeg':
case 'png':
alert("it got an extension which suggests it a PNG or JPG image (but N.B. that only its name, so let be sure that we, say, check the mime-type server-side!)");
// uncomment the next line to allow the form to submitted in this case:
// break;
default:
// Cancel the form submission
submitEvent.preventDefault();
}
});
});
HTML:
<form id="your_form" method="post" enctype="multipart/form-data">
<input id="file_input" type="file" />
<input type="submit">
</form>
Вы можете добиться этого, используя JQuery
HTML
<input type="file" id="FilUploader" />
JQuery
$("#FilUploader").change(function () {
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only formats are allowed : "+fileExtension.join(', '));
}
});
Для получения дополнительной информации Нажмите здесь
Вот простой код для проверки javascript, и после его проверки он очистит входной файл.
<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("");
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('.form-file input').each(function () {
$this = jQuery(this);
$this.on('change', function() {
var fsize = $this[0].files[0].size,
ftype = $this[0].files[0].type,
fname = $this[0].files[0].name,
fextension = fname.substring(fname.lastIndexOf('.')+1);
validExtensions = ["jpg","pdf","jpeg","gif","png","doc","docx","xls","xlsx","ppt","pptx","txt","zip","rar","gzip"];
if ($.inArray(fextension, validExtensions) == -1){
alert("This type of files are not allowed!");
this.value = "";
return false;
}else{
if(fsize > 3145728){/*1048576-1MB(You can change the size as you want)*/
alert("File size too large! Please upload less than 3MB");
this.value = "";
return false;
}
return true;
}
});
});
});
</script>
</head>
<body>
<form>
<div class="form-file">
<label for="file-upload" class="from-label">File Upload</label>
<input class="form-control" name="file-upload" id="file-upload" type="file">
</div>
</form>
</body>
</html>
Вот полный ответ для проверки размера файла и расширения файла. Это использовало поле ввода файла по умолчанию и библиотеку jQuery. Рабочий пример: https://jsfiddle.net/9pfjq6zr/2/
Если вы не хотите использовать $(this).val(), вы можете попробовать:
var file_onchange = function () {
var input = this; // avoid using 'this' directly
if (input.files && input.files[0]) {
var type = input.files[0].type; // image/jpg, image/png, image/jpeg...
// allow jpg, png, jpeg, bmp, gif, ico
var type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico)$/;
if (type_reg.test(type)) {
// file is ready to upload
} else {
alert('This file type is unsupported.');
}
}
};
$('#file').on('change', file_onchange);
Надеюсь, это поможет!
function yourfunctionName() {
var yourFileName = $("#yourinputfieldis").val();
var yourFileExtension = yourFileName .replace(/^.*\./, '');
switch (yourFileExtension ) {
case 'pdf':
case 'jpg':
case 'doc':
$("#formId").submit();// your condition what you want to do
break;
default:
alert('your File extension is wrong.');
this.value = '';
}
}
Следующий код позволяет загружать файлы gif, png, jpg, jpeg и bmp.
var extension = $('#your_file_id').val().split('.').pop().toLowerCase();
if($.inArray(extension, ['gif','png','jpg','jpeg','bmp']) == -1) {
alert('Sorry, invalid extension.');
return false;
}
$("#file-upload").change(function () {
var validExtensions = ["jpg","pdf","jpeg","gif","png"]
var file = $(this).val().split('.').pop();
if (validExtensions.indexOf(file) == -1) {
alert("Only formats are allowed : "+validExtensions.join(', '));
}
});