<ইনপুট টাইপ = "ফাইল"> কীভাবে কেবল চিত্র ফাইলগুলি মেনে নিতে দেওয়া যায়?

375

আমার কেবল <input type="file">ট্যাগের মাধ্যমে চিত্র ফাইল আপলোড করতে হবে ।

এখনই, এটি সমস্ত ফাইলের প্রকার গ্রহণ করে। তবে, আমি এটিকে কেবল নির্দিষ্ট চিত্র ফাইল এক্সটেনশনের মধ্যে সীমাবদ্ধ রাখতে চাই .jpg, যার মধ্যে রয়েছে .gifইত্যাদি include

আমি কীভাবে এই কার্যকারিতা অর্জন করতে পারি?

html

— kbvishnu
সূত্র

সার্ভার-সাইড প্রযুক্তি কী ব্যবহার করেছে?

— এরদল জি।

1

কেবিভিশনু, সম্ভবত আপনি এত দিন আগে যে উত্তরটি গ্রহণ করেছিলেন তা পুনর্বিবেচনা করতে পারে। আপনাকে আর একটি উত্তর গ্রহণ করতে হবে না। আমি কেবল উত্তর দিচ্ছি এবং অন্যান্য উত্তরের তুলনায় এর ভোটের স্তর এবং কতগুলি পতাকা আমরা পেয়েছি তার উপর ভিত্তি করে আমি পরামর্শ দিচ্ছি, সম্ভবত আপনার এটি কমপক্ষে অস্বীকার করার বিষয়টি বিবেচনা করা উচিত।

— অ্যারন হল

942

ইনপুট ট্যাগের গ্রহণযোগ্য বৈশিষ্ট্যটি ব্যবহার করুন। সুতরাং কেবলমাত্র পিএনজি, জেপিইজি এবং জিআইএফ গ্রহণ করতে আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

স্নিপেট প্রসারিত করুন

বা সহজভাবে:

<input type="file" name="myImage" accept="image/*" />

স্নিপেট প্রসারিত করুন

নোট করুন যে এটি কেবল ব্রাউজারকে কোনও ফাইল-প্রকারের কাছে ব্যবহারকারীকে কী প্রদর্শন করতে হবে তার একটি ইঙ্গিত সরবরাহ করে তবে এটি সহজেই সংশোধন করা যায়, সুতরাং আপনার সর্বদা সার্ভারে আপলোড করা ফাইলটিও বৈধ হওয়া উচিত।

এটি আইই 10+, ক্রোম, ফায়ারফক্স, সাফারি 6+, অপেরা 15+ এ কাজ করা উচিত তবে মোবাইলগুলিতে সমর্থনটি খুব স্কেচিযুক্ত (২০১৫ হিসাবে) এবং কিছু প্রতিবেদন দ্বারা এটি কিছু মোবাইল ব্রাউজারগুলিকে কিছুতেই আপলোড করা থেকে বিরত রাখতে পারে, তাই আপনার টার্গেট প্ল্যাটফর্মগুলি ভালভাবে পরীক্ষা করতে ভুলবেন না।

বিশদ ব্রাউজার সহায়তার জন্য, দেখুন http://caniuse.com/#feat=input-file-accept

— ম্যাডক্যাপ হাসল
সূত্র

@ এমডক্যাপ accept="file/csv, file/xls"এটা বৈধ ??

— কেএনইউ

19

আপনি কি তা নিশ্চিত image/x-png? এই তালিকা অনুসারে, এটা ঠিক image/png। iana.org/assignments/media-types/media-types.xhtml

— মাইক্রো

6

এটি নির্বাচিত উত্তর হওয়া উচিত! এটির জন্য কেবল একটি নোটের অভাব রয়েছে যা বলছে যে আপনাকে এখনও সার্ভার-সাইডটি পরীক্ষা করতে হবে (সমর্থনকারী ব্রাউজারের কারণে নয়, তবে সুরক্ষার জন্যও)

— এরদল জি।

1

সম্ভবত উত্তরটি উত্তর দেওয়ার পরে এটি কাজ করে তবে এটি চেষ্টা করে এফএফের জন্য কাজ করে না work আমি কেবল গ্রহণযোগ্য = "। পিএনজি

— ডিয়েগো

1

এটি সম্পূর্ণরূপে নির্ভর করবেন না। এটি সহজেই অন্যান্য ফাইলগুলিও গ্রহণ করতে পারে। আপনাকে কেবল ওপেন ফাইল উইন্ডোতে অনুমোদিত ফাইলের ধরণটি পরিবর্তন করতে হবে।

163

এটি ব্যবহার করে:

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

এফএফ এবং ক্রোম উভয় ক্ষেত্রেই কাজ করে।

— Tyilo
সূত্র

14

স্বীকৃতি বৈশিষ্ট্যটি কোনও বৈধতা সরঞ্জাম নয়, সমস্ত আপলোড সর্বদা সার্ভারে বৈধ হওয়া উচিত ...

— TlonXP

1

এখনও নেটিভ অ্যান্ড্রয়েড ব্রাউজারে সমর্থিত নয়, তবে অন্যদের জন্য ভালভাবে কাজ করে বলে আমি অনুমান করি ক্যানিউজ.com

— #

আমি এই সমাধানটি পছন্দ করি কারণ ফাইলটি প্রম্পটে প্রকারে ড্রপডাউন "চিত্র ফাইলগুলি" দেখায়।

— হার্ডসিটিং

এটির সাথে সাবধানতা অবলম্বন করুন, কারণ এটি এসভিজিকে অনুমতি দেয় যা আপনি নাও চান।

— স্টেফেনমুরডোক

এটি সর্বাধিক চিত্র ফাইলগুলিকে অনুমতি দেবে p সুতরাং বিশেষভাবে টাইপ উল্লেখ করা ভাল।

— থমরাই টি

76

এটি ব্যবহার করুন

<input type="file" accept=".png, .jpg, .jpeg" />

এটা আমার জন্য কাজ করেছে

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— Er। মোহিত অগ্রওয়াল
সূত্র

এটি আইওএসের জন্য কাজ করে না 12 ব্যবহারকারী এখনও ডিভাইসে ভিডিও চয়ন করতে পারেন।

— ব্যবহারকারী 3160227

28

পদক্ষেপগুলি:
1. ইনপুট ট্যাগটিতে স্বীকৃতি বৈশিষ্ট্য যুক্ত করুন
২. জাভাস্ক্রিপ্টের মাধ্যমে
বৈধতা দিন 3. সামগ্রীটি সত্যই কোনও প্রত্যাশিত ফাইল টাইপ কিনা তা যাচাই করতে সার্ভার সাইডের বৈধতা যুক্ত করুন

এইচটিএমএল এবং জাভাস্ক্রিপ্ট জন্য:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

ব্যাখ্যা:

গ্রহণযোগ্য বৈশিষ্ট্যগুলি ফাইলগুলি ফিল্টার করে যা ফাইল চয়নকারী পপআপে প্রদর্শিত হবে। তবে এটি বৈধতা নয়। এটি ব্রাউজারে কেবল একটি ইঙ্গিত। ব্যবহারকারী এখনও পপআপে বিকল্পগুলি পরিবর্তন করতে পারে।
জাভাস্ক্রিপ্ট কেবল ফাইল এক্সটেনশনের জন্য বৈধতা দেয়, তবে নির্বাচিত ফাইলটি আসল জেপিজি বা পিএনজি কিনা তা সত্যই যাচাই করতে পারে না।
সুতরাং আপনাকে সার্ভারের পাশে ফাইল সামগ্রীর বৈধতার জন্য লিখতে হবে।

— সূর্য কামেশ্বর রাও রবি
সূত্র

1

সর্বাধিক সম্পূর্ণ উত্তর

— প্যারানয়েডহোমিনিড

27

এটি দ্বারা অর্জন করা যেতে পারে

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

তবে এটি একটি ভাল উপায় নয়। ফাইলটি কোনও চিত্র চেক করতে আপনার সার্ভারের পাশে কোড করতে হবে বা না।

চিত্র ফাইলটি প্রকৃত চিত্র বা নকল চিত্র কিনা তা পরীক্ষা করে দেখুন

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

আরও রেফারেন্সের জন্য, এখানে দেখুন

http://www.w3schools.com/tags/att_input_accep.asp
http://www.w3schools.com/php/php_file_upload.asp

— অশোক দেবতওয়াল
সূত্র

5

আপনি ব্যবহার করতে পারেন acceptজন্য গুণাবলীর <input type="file">এই দস্তাবেজ পড়তে http://www.w3schools.com/tags/att_input_accept.asp

— yussan
সূত্র

3

টাইপ = "ফাইল" ব্যবহার করুন এবং = "চিত্র / *" গ্রহণ করুন (বা আপনি যে ফর্ম্যাটটি চান), ব্যবহারকারীকে নির্দিষ্ট ফর্ম্যাট সহ একটি ফাইল চয়ন করার অনুমতি দিন। তবে আপনাকে আবার এটি ক্লায়েন্টের পক্ষ থেকে আবার পরীক্ষা করতে হবে, কারণ ব্যবহারকারী অন্য ধরণের ফাইল নির্বাচন করতে পারেন। এটি আমার পক্ষে কাজ করে।

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

এবং তারপরে, আপনার জাভাস্ক্রিপ্ট স্ক্রিপ্টে

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— মাতি ক্যাসনেলি
সূত্র

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

— অ্যাডাম মার্শাল

আমি আপনার ধারণা পেতে। এটি কোনো বৈধ জাতীয় সিনট্যাক্স হল: const file: File = imageInput.files[0];? এছাড়াও, ইনপুটগুলিতে আইডি নির্ধারণ করা প্রচলিত পদ্ধতিতে করা হয় না।

— ইভান পি।

আসলে, জেএস নয়, এটি টাইপ স্ক্রিপ্ট। ব্লক কোডটি একটি কৌণিক প্রকল্প থেকে অনুলিপি করা হয়েছিল। আপনি যদি এটি জাভাস্ক্রিপ্ট ফাইলে ব্যবহার করতে চান তবে টাইপ সংজ্ঞা (: ফাইল) বাদ দিতে হবে

— মাটি ক্যাসানেলি

0

আপনি যদি একসাথে একাধিক চিত্র আপলোড করতে চান তবে আপনি ইনপুটটিতে multipleবৈশিষ্ট্য যুক্ত করতে পারেন ।

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

স্নিপেট প্রসারিত করুন

— JerryGoyal
সূত্র