আমি jQuery একটি ফাইল আপলোড ক্ষেত্রকে কেবল jpg / jpeg, png, এবং gif-এ সীমাবদ্ধ রাখতে চাই। PHPইতিমধ্যে আমি ব্যাকএন্ড চেক করছি । আমি JavaScriptইতিমধ্যে একটি ফাংশনটির মাধ্যমে আমার জমা বোতামটি চালাচ্ছি তাই আমাকে সাবমিট বা সতর্কতার আগে ফাইলের ধরনগুলি কীভাবে পরীক্ষা করতে হবে তা সত্যিই আমার জানা উচিত।
উত্তর:
আপনি অন্য কোনও ফিল্ডের সমান একটি ফাইলের ক্ষেত্রের মান পেতে পারেন। তবে আপনি এটি পরিবর্তন করতে পারবেন না।
সুতরাং কোনও ফাইলের সঠিক এক্সটেনশান রয়েছে কিনা তা सतর্কভাবে পরীক্ষা করতে আপনি এই জাতীয় কিছু করতে পারেন:
var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}
$('#file_field').change(function(){// above check});
$("#my_upload_form").bind("submit", function() { // above check });$("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit ব্যবহার করে এখন আবদ্ধ হওয়া উচিত । আপনি ব্যবহার করে ফর্ম জমা দেওয়ার প্রতিরোধ করতে পারেন$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
".jpg" এমএস ওয়ার্ড ফাইলের উদাহরণ হিসাবে যুক্ত করেন তবে ফাইলআপলোড এই ফাইলটিকে চিত্র হিসাবে গ্রহণ করবে। আমি মনে করি এটি ঠিক নেই।
এই কাজের জন্য কোনও প্লাগইন প্রয়োজন নেই। অন্যান্য কয়েকটি স্ক্রিপ্ট থেকে এটি একত্রে আবদ্ধ হয়েছে:
$('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 = '';
}
});
এখানে কৌশলটি হ'ল আপলোড বোতামটি অক্ষমতে সেট করুন যদি না কোনও বৈধ ফাইল প্রকার নির্বাচন না করা হয়।
আপনি jQuery এর জন্য বৈধতা প্লাগইন ব্যবহার করতে পারেন: http://docs.jquery.com / প্লাগইনস / ভালিডেশন
এটি একটি গ্রহণযোগ্য () নিয়ম রয়েছে যা আপনার ঠিক যা প্রয়োজন ঠিক তা করে: http://docs.jquery.com/plugins/Validation/Methods/accept# এক্সটেনশন
নোট করুন যে ফাইল এক্সটেনশন নিয়ন্ত্রণ করা কোনওভাবেই বুলেট প্রুফ নয় কারণ এটি কোনওভাবেই ফাইলের মাইমাইপ সম্পর্কিত নয়। সুতরাং আপনার কাছে একটি .png থাকতে পারে যা একটি শব্দ নথি এবং একটি ডক perfectly তাই আরও নিয়ন্ত্রণ সার্ভার-সাইড করতে ভুলবেন না;)
ফ্রন্ট-এন্ডের জন্য এটি ' গ্রহণযোগ্য ' বৈশিষ্ট্যটি রাখা খুব সুবিধাজনক যদি আপনি কোনও ফাইল ক্ষেত্র ব্যবহার করছেন।
উদাহরণ:
<input id="file" type="file" name="file" size="30"
accept="image/jpg,image/png,image/jpeg,image/gif"
/>
কয়েকটি গুরুত্বপূর্ণ নোট:
ব্যবহারকারীর যেই শরণাপন্নতা রয়েছে তার চেয়ে বরং মাইমে পরীক্ষা করতে চান না? যদি তা হয় তবে এটি এক লাইনেরও কম:
<input type="file" id="userfile" accept="image/*|video/*" required />আমি ওয়ার্কিং কোড উদাহরণ লেখার চেষ্টা করি, আমি এটি পরীক্ষা করি এবং সবকিছু কার্যকর হয়।
হরে কোড:
এইচটিএমএল:
<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
}
}এই কোডটি সূক্ষ্মভাবে কাজ করে, তবে কেবলমাত্র সমস্যাটি যদি ফাইল ফর্ম্যাটটি নির্দিষ্ট বিকল্পগুলি ছাড়া অন্য হয় তবে এটি একটি সতর্কতা বার্তা দেখায় তবে এটি ফাইলটির নাম প্রদর্শন করে যখন এটি অবহেলা করা উচিত।
$('#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; }
});এই উদাহরণটি কেবল পিএনজি চিত্র আপলোড করতে দেয়।
এইচটিএমএল
<input type="file" class="form-control" id="FileUpload1" accept="image/png" />জাতীয়
$('#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;
}
});<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>যদি আপনি একাধিক (এইচটিএমএল 5) ফাইল আপলোডগুলি নিয়ে কাজ করে থাকেন তবে আমি শীর্ষ প্রস্তাবিত মন্তব্যটি নিয়েছি এবং এটিকে কিছুটা সংশোধন করেছি:
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!');
}
} $("input[name='btnsubmit']").attr('disabled', true);
$('input[name="filphoto"]').change(function () {
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext)
{
case 'jpg':
case 'jpeg':
case 'png':
case 'bmp':
$("input[name='btnsubmit']").attr('disabled', false);
break;
default:
alert('This is not an allowed file type.');
$("input[name='btnsubmit']").attr('disabled', true);
this.value = '';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;
}জাভাস্ক্রিপ্ট বৈধতার জন্য একটি সাধারণ কোড এখানে রয়েছে এবং এটি বৈধ হওয়ার পরে এটি ইনপুট ফাইলটি পরিষ্কার করবে।
<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("");
}
}
$("#my_upload_form").bind("submit", function() { // above check });