এইচটিএমএল: কীভাবে কেবল ফাইল আপলোড সীমাবদ্ধ?

Question

এইচটিএমএল দিয়ে কীভাবে ফাইল টাইপ আপলোড করা যায় তা আমি কীভাবে সীমাবদ্ধ করব?

ব্যবহারকারীর অভিজ্ঞতা সহজ করতে, আমি ফাইল আপলোডগুলি কেবল চিত্র (জেপিইগ, জিআইএফ, পিএনজি) হিসাবে সীমাবদ্ধ করতে চাই।

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

Comments

স্পষ্টতই, এটিকে যথাযথভাবে সুরক্ষিত করার জন্য - আমি ব্যাকএন্ড / সার্ভারের পাশ দিয়ে যাব। তবে আমি কেবল ব্যবহারকারীর অভিজ্ঞতা অর্জনের একটি উপায় যা তারা আপলোড করতে চাইছে এমন চিত্রটি খুঁজতে যখন "ব্রাউজ" ক্লিক করেন, তখন তাদের সেই শব্দ শংসাপত্রগুলি সমস্ত দেখতে হবে না যা প্রযোজ্য নয় আপলোড করুন

— জ্যাকবটি

আমি জানি না যে আপনি একটি ফাইল মাস্ক সেট করতে পারেন। আমি এটি সফলভাবে কখনও দেখিনি।

— রবার্ট কে

Answer 1

এইচটিএমএল 5 বলে <input type="file" accept="image/*">। অবশ্যই, ক্লায়েন্ট-সাইডের বৈধতা কখনই বিশ্বাস করবেন না: সর্বদা সার্ভার-সাইডে আবার পরীক্ষা করুন ...

Answer 2

এইচটিএমএল 5 ইনপুট এট্রিবিউট এবং একাধিক অ্যাট্রিবিউট গ্রহণ করে accept একাধিক বৈশিষ্ট্য ব্যবহার করে আপনি একাধিক চিত্র আপলোড করতে পারেন।

<input type="file" multiple accept='image/*'>

আপনি একাধিক মাইম প্রকার সীমাবদ্ধ করতে পারেন।

<input type="file" multiple accept='image/*|audio/*|video/*' >

এবং ফাইল অবজেক্ট ব্যবহার করে মাইম প্রকারটি পরীক্ষা করার অন্য উপায়।

ফাইল অবজেক্ট আপনাকে নাম, আকার এবং প্রকার দেয়।

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

উপরের কোড দ্বারা আপলোড করার জন্য কিছু ফাইল প্রকারের জন্য আপনি ব্যবহারকারীকেও সীমাবদ্ধ রাখতে পারেন।

Comments

image/*|audio/*|video/*আমার জন্য কাজ না করে, এটি করা উচিত কমা দিয়ে পৃথক করা মনে হয়:image/*,video/mp4,.txt

— serg

মাইমটাইপ পরীক্ষা করার জন্য দুর্দান্ত! TX!

— পেড্রো

Answer 3

সম্পাদিত

যদি জিনিসগুলি যেমনটি করা উচিত ছিল তবে আপনি এটি "স্বীকৃতি" বৈশিষ্ট্যের মাধ্যমে করতে পারেন।

http://www.webmasterworld.com/forum21/6310.htm

যাইহোক, ব্রাউজারগুলি এটিকে বেশ উপেক্ষা করে, তাই এটি অপ্রাসঙ্গিক। সংক্ষিপ্ত উত্তরটি হ'ল, আমি এইচটিএমএলে এটি করার কোনও উপায় আছে বলে আমি মনে করি না। পরিবর্তে আপনাকে এটি সার্ভার-সাইড চেক করতে হবে।

নিম্নলিখিত পুরানো পোস্টে কিছু তথ্য রয়েছে যা আপনাকে বিকল্পগুলির সাথে সহায়তা করতে পারে।

ফাইল ইনপুট 'গ্রহণ' বৈশিষ্ট্য - এটি দরকারী?

Answer 4

এখানে চিত্র আপলোডের জন্য এইচটিএমএল রয়েছে। ডিফল্টরূপে এটি কেবল ব্রাউজিং উইন্ডোতে চিত্র ফাইলগুলি দেখায় কারণ আমরা রেখেছি accept="image/*"। তবে আমরা এখনও ড্রপডাউন থেকে এটি পরিবর্তন করতে পারি এবং এটি সমস্ত ফাইল প্রদর্শন করবে। সুতরাং জাভাস্ক্রিপ্ট অংশটি যাচাই করেছে বাছাই করা ফাইলটি আসল চিত্র কিনা।

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

এখানে পরিবর্তন ইভেন্টে আমরা প্রথমে চিত্রটির আকার পরীক্ষা করি। এবং দ্বিতীয় ifশর্তে আমরা এটি একটি চিত্র ফাইল কিনা তা যাচাই করি।

this.files[0].type.indexOf("image")হতে হবে -1যদি এটি একটি ইমেজ ফাইল নয়।

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Comments

দয়া করে ব্যাখ্যা যুক্ত করুন।

— পল সোয়েটজ

দয়া করে নোট করুন যে উপরেরটির জন্য jquery প্রয়োজন, তবে তা বলে না। চিত্রিত করার পক্ষে যথেষ্ট সহজ, তবে বলা কার্যকর। আমি এটির জন্য একটি বেহালতা তৈরি করেছি । এটি অন্যান্য কিছু কাজ করে (কোনও প্রকল্পের জন্য প্রয়োজনীয় হিসাবে) তবে ধারণাটি একই রকম।

— ডেভ ল্যান্ড

Answer 5

আপনি কেবল সার্ভার-সাইডে নিরাপদে এটি করতে পারেন। "স্বীকার করুন" বৈশিষ্ট্যটি ব্যবহার করা ভাল, তবে এটি অবশ্যই সার্ভারের পাশ দিয়ে বৈধ হওয়া উচিত যাতে ব্যবহারকারীরা সীমাবদ্ধতা ছাড়াই আপনার স্ক্রিপ্টে সিআরএল করতে সক্ষম হন।

আমি আপনাকে পরামর্শ দিই: কোনও অ-চিত্র ফাইল বাতিল করুন, ব্যবহারকারীকে সতর্ক করুন এবং ফর্মটি পুনরায় প্রদর্শন করুন।

Answer 6

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

এখন এইচটিএমএল অংশে

<input type="file" onchange="chng()">

এই কোডটি চেক করবে যে আপলোড করা ফাইলটি কোন জেপিজি ফাইল কিনা এবং অন্য ধরণের আপলোডকে সীমাবদ্ধ করে

Comments

এই চেকটি ফাইল এক্সটেনশনের একটি সাধারণ নাম পরিবর্তন করে পরাজিত। আপনি যদি এমন কিছু করতে যাচ্ছেন তবে আপনার কমপক্ষে ইউআরআই টাইপের ডেটাটি পরীক্ষা করা উচিত।

— লুকাস লেব্ল্যাঙ্ক

Answer 7

শেষ পর্যন্ত, ব্রাউজার উইন্ডোতে প্রদর্শিত ফিল্টারটি ব্রাউজার দ্বারা সেট করা হয়। অ্যাট্রিবিউট অ্যাট্রিবিউটে আপনি চান সমস্ত ফিল্টার নির্দিষ্ট করে দিতে পারেন, তবে আপনার ব্যবহারকারীর ব্রাউজার এটি মেনে চলবে এমন কোনও গ্যারান্টি নেই।

আপনার সেরা বেটটি হ'ল সার্ভারের পিছনের প্রান্তে এক ধরণের ফিল্টারিং।

Answer 8

আপলোডাইফ নামে একটি প্রকল্প চেকআউট করুন। http://www.uploadify.com/

এটি একটি ফ্ল্যাশ + jQuery ভিত্তিক ফাইল আপলোডার। এটি ফ্ল্যাশের ফাইল নির্বাচন ডায়ালগ ব্যবহার করে, যা আপনাকে ফাইলের ধরণের ফিল্টার করার ক্ষমতা দেয়, একই সাথে একাধিক ফাইল নির্বাচন করতে পারে ইত্যাদি gives

Comments

ফ্ল্যাশ? ... উপায় নেই!

— এরিকবেস্ট

সবচেয়ে খারাপ সমাধান।

— মাত্তেও মোসকোনি

বন্ধুরা, আমি দেখতে পাচ্ছি না কেন এটি সবচেয়ে খারাপ সমাধান। যদিও এটি সত্য ফ্ল্যাশটি অদৃশ্য হতে চলেছে, এটি এখনও পুরানো ব্রাউজারগুলি ব্যবহার করছে - খুব পুরানো, ঠিক আছে, তবে এখনও ব্যবহৃত হচ্ছে - এবং এই সমাধানটিতে উভয় প্রকারের প্রযুক্তি রয়েছে: jQuery + HTML5 এবং ফ্ল্যাশ ফ্যালব্যাক back এটি ভিডিওজেএসের মতোই দুর্দান্ত, যা ব্রাউজার ভিডিওটি খেলতে না পারলে ফ্ল্যাশ ফ্যালব্যাক রয়েছে ... আমি সমাধানটি পরীক্ষা করে দেখিনি, এটি সেরা হতে পারে না, তবে ডাউনভোটগুলি ন্যায্য নয়।

— আনপেদ্র

+1 নিচে ভোট দেওয়ার জন্য নিরীহ। ফ্ল্যাশ চলে যাচ্ছে তবে ভাল ফ্যালব্যাক পেয়েছে। আপনার কি মনে হয় সকেট ফ্যালব্যাকের জন্য গুগল জিমেইলের জন্য কী ব্যবহার করে? সিলি।

— জেসন সেব্রিং

এই উত্তরটি 4 বছরের পুরানো। সেই সময়ে, একাধিক ফাইল নির্বাচনের জন্য বা গৃহীত ধরণের দ্বারা নির্বাচিত ফাইল উইন্ডোটি ফিল্টার করার জন্য এইচটিএমএল 5 সমর্থন কোনও বড় ব্রাউজারগুলিতে ভালভাবে সমর্থিত ছিল না। এটি এমন একটি সমাধান ছিল যা সেই সময়ে অনেকের পক্ষে কাজ করত তবে আমি এখন একটি খাঁটি HTML5 সমাধানের দিকে এগিয়ে যেতে চাই move

— এন্ড্রুআর