আমি ব্যবহার করতাম <input type= "file" name="Upload" >
এখন আমি কেবল .pdf এবং .xls ফাইল গ্রহণ করে এটি সীমাবদ্ধ করতে চাই।
আমি যখন সাবমিট বাটন ক্লিক করি তখন এটি যাচাই করা উচিত।
এবং যখন আমি ওয়েবপৃষ্ঠায় ফাইলগুলি (পিডিএফ / এক্সএলএস) ক্লিক করি তখন এটি স্বয়ংক্রিয়ভাবে খুলতে হবে।
কেউ দয়া করে এর জন্য কিছু উদাহরণ দিতে পারেন?
উত্তর:
আপনি এটি বৈশিষ্ট্যটি ব্যবহার করে acceptএবং এতে অনুমোদিত মাইম-প্রকারগুলি যোগ করে এটি করতে পারেন। তবে সমস্ত ব্রাউজার সেই বৈশিষ্ট্যটিকে সম্মান করে না এবং এটি কোনও কোড পরিদর্শকের মাধ্যমে সহজেই মুছে ফেলা যায়। সুতরাং উভয় ক্ষেত্রেই আপনাকে সার্ভার সাইডে ফাইলের ধরন পরীক্ষা করতে হবে (আপনার দ্বিতীয় প্রশ্ন)।
উদাহরণ:
<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />
আপনার তৃতীয় প্রশ্নের "এবং যখন আমি ওয়েবপৃষ্ঠায় ফাইলগুলি (পিডিএফ / এক্সএলএস) ক্লিক করি তখন এটি স্বয়ংক্রিয়ভাবে খুলতে হবে" ":
আপনি তা অর্জন করতে পারবেন না। ক্লায়েন্ট মেশিনে পিডিএফ বা এক্সএলএস কীভাবে খোলা হয় তা ব্যবহারকারী সেট করে।
আপনি এটি ব্যবহার করতে পারেন:
এইচটিএমএল
<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />
শুধুমাত্র সমর্থন। পিডিএফ এবং। এক্সএলএস ফাইল
দুর্ভাগ্যক্রমে, নির্বাচনের সময় এটি করার কোনও গ্যারান্টিযুক্ত উপায় নেই।
কিছু ব্রাউজার ট্যাগগুলির acceptবৈশিষ্ট্যটিকে সমর্থন করে input। এটি একটি ভাল শুরু, তবে পুরোপুরি নির্ভর করা যায় না।
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
জমা cfinputদেওয়ার সময় ফাইল এক্সটেনশন পরীক্ষা করতে আপনি একটি ব্যবহার করতে পারেন এবং বৈধতা চালাতে পারেন , তবে মাইম-টাইপ নয়। এটি আরও ভাল, তবে এখনও বোকা-প্রমাণ নয়। ওএসএক্স-এ থাকা ফাইলগুলির প্রায়শই কোনও ফাইল এক্সটেনশন থাকে না বা ব্যবহারকারীরা দূষিতভাবে ফাইলের ধরণগুলি ভুলবিভক্ত করতে পারে।
কোল্ডফিউশনগুলি ফলাফলের সম্পত্তি ( ) cffileব্যবহার করে মাইম-টাইপ পরীক্ষা করতে পারে তবে এটি কেবল আপলোডের পরেই করা সম্ভব । এটি আপনার সেরা বাজি, তবে মাইম-টাইপগুলি এখনও ভুল হতে পারে বলে 100% নিরাপদ নয়।contentTypecffile.contentType
acceptউপর অ্যাট্রিবিউট inputট্যাগ যোগ করা যেতে পারে কিন্তু 100% কার্যকরী নয়।
আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। বিবেচনা করে নিন যে জাভাস্ক্রিপ্টের সাহায্যে এটি করার ক্ষেত্রে বড় সমস্যাটি হ'ল ইনপুট ফাইলটি পুনরায় সেট করা। ভাল, এটি কেবল জেপিজির মধ্যে সীমাবদ্ধ (পিডিএফের জন্য আপনাকে মাইম টাইপ এবং ম্যাজিক নম্বরটি পরিবর্তন করতে হবে ):
<form id="form-id">
<input type="file" id="input-id" accept="image/jpeg"/>
</form>
<script type="text/javascript">
$(function(){
$("#input-id").on('change', function(event) {
var file = event.target.files[0];
if(file.size>=2*1024*1024) {
alert("JPG images of maximum 2MB");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
if(!file.type.match('image/jp.*')) {
alert("only JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
//verify the magic number
// for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
alert("ok!");
} else {
alert("only valid JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
};
fileReader.readAsArrayBuffer(file);
});
});
</script>
বিবেচনা করে দেখুন যে এটি ফায়ারফক্স এবং ক্রোমের সর্বশেষ সংস্করণে এবং আইপিসপ্লোরার 10 এ পরীক্ষা করা হয়েছিল।
আপনি নিম্নলিখিত উপায় চেষ্টা করতে পারেন
<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
বা (এ্যাসপেট এমভিসি তে)
@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })
আমি ফাইলগুলি সার্ভারের পাশে ফিল্টার করব, কারণ ফায়ারফক্সে লাইভ এইচটিটিপি শিরোনামের মতো সরঞ্জাম রয়েছে যা শেল সহ কোনও ফাইল আপলোড করতে দেয়। লোকেরা আপনার সাইট হ্যাক করতে পারে। এটি নিরাপদে থাকার জন্য সার্ভার সাইটটি করুন।
যদিও এই নির্দিষ্ট উদাহরণটি একাধিক ফাইল আপলোডের জন্য, এটি সাধারণ তথ্য দেয় যা প্রয়োজন:
https://developer.mozilla.org/en-US/docs/DOM/File.type
যতক্ষণ না ফাইল ডাউনলোড / ডাউনলোড করা / এটি জাভাস্ক্রিপ্ট প্রশ্ন নয় - বরং একটি সার্ভার কনফিগারেশন। যদি কোনও ব্যবহারকারীর পিডিএফ বা এক্সএলএস ফাইল খোলার জন্য কিছু ইনস্টল না থাকে তবে তাদের ডাউনলোড করা তাদের একমাত্র পছন্দ হবে।
আপনি যদি ফাইল আপলোড নিয়ন্ত্রণ ব্যবহারকারী ফাইলের ধরণের ব্যবহারকারীদের একটি বোতাম ক্লিকের উপর আপলোড করতে পারেন তা সীমাবদ্ধ করতে চান তবে এই উপায়টি ..
<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;
dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];
return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>
তারপরে আপনি উপরের বোতামের অনক্লিকের মতো একটি ইভেন্ট থেকে ফাংশনটি কল করতে পারেন, যা দেখে মনে হচ্ছে:
অনক্লিক = "টেস্টফায়ালটাইপ (this.for.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"
আপনি এটিকে পরিবর্তন করতে পারেন: PDFএবংXLS
আপনি এটি এখানে প্রয়োগ করা দেখতে পারেন: ডেমো
accept-ট্রিবিউটের সাথে তুলনা করা যায় , স্থানীয় মেশিনে কোনও ফাইল নির্বাচন করার সময় এই পদ্ধতিটি ফোল্ডার সামগ্রীগুলি নির্বাচিত ফাইল-প্রকারের সাথে সংকুচিত করে না।
আর একবার চেষ্টা কর:-
<MyTextField
id="originalFileName"
type="file"
inputProps={{ accept: '.xlsx, .xls, .pdf' }}
required
label="Document"
name="originalFileName"
onChange={e => this.handleFileRead(e)}
size="small"
variant="standard"
/>