জাভাস্ক্রিপ্ট সহ আপলোড করার আগে চিত্রের প্রস্থ এবং উচ্চতা পরীক্ষা করুন

Question

আমার একটি ফর্ম সহ একটি জেপিএস রয়েছে যাতে কোনও ব্যবহারকারী কোনও চিত্র রাখতে পারেন:

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

আমি এই জেএস লিখেছি:

function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}

যা ফাইলের ধরণ এবং আকার যাচাই করতে সূক্ষ্ম কাজ করে। এখন আমি চিত্রের প্রস্থ এবং উচ্চতা যাচাই করতে চাই তবে আমি এটি করতে পারি না।
আমি চেষ্টা করেছি target.files[0].widthকিন্তু পেয়েছি undefined। অন্যান্য উপায় সঙ্গে আমি পেতে 0।
কোনও পরামর্শ?

Answer 1

ফাইলটি কেবল একটি ফাইল, আপনার এমন চিত্র তৈরি করতে হবে:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

ডেমো: http://jsfiddle.net/4N6D9/1/

আমি এটি গ্রহণ করি আপনি বুঝতে পারেন এটি কেবল কয়েকটি ব্রাউজারেই সমর্থিত। বেশিরভাগ ক্ষেত্রে ফায়ারফক্স এবং ক্রোম, পাশাপাশি এখন অপেরা হতে পারে।

পিএস URL.createObjectURL () পদ্ধতিটি মিডিয়াস্ট্রিম ইন্টারফেস থেকে সরানো হয়েছে। এই পদ্ধতিটি 2013 সালে অবহেলা করা হয়েছে এবং HTMLMediaElement.srcObject এ স্ট্রিম বরাদ্দ করে বাতিল করা হয়েছে। পুরানো পদ্ধতিটি সরানো হয়েছে কারণ এটি কম সুরক্ষিত, স্ট্রিমটি শেষ করতে URL.revokeOjbectURL () এ কল প্রয়োজন requ অন্যান্য ব্যবহারকারীর এজেন্টরা হয় এই বৈশিষ্ট্যটির বৈশিষ্ট্যটিকে (ফায়ারফক্স) অবমূল্যায়ন করেছে বা সরিয়ে দিয়েছে (সাফারি)।

আরও তথ্যের জন্য, দয়া করে এখানে উল্লেখ করুন ।

Comments

অবশ্যই আপনার সাফারি 6.0 না থাকলে এটি সাফারিটিতে কাজ করবে না। 6.0 হ'ল একমাত্র সংস্করণ যা এখন পর্যন্ত ফাইল এপিআই সমর্থন করে। এবং আমি মনে করি না যে অ্যাপল উইন্ডোজের জন্য .0.০ প্রকাশ করবে। 5.1.7 অনেক আগে থেকেই সুফোর সর্বশেষ সংস্করণ ছিল

— সেহো লি

এটি IE10 এ কাজ করে তবে মনে হয় IE9 এবং নীচে কাজ করবে না। এবং এটি কারণ আইই 9 এবং নীচে ফাইল এপিআই সমর্থন করে না ( caniuse.com/#search=file%20api )

— মাইকেল ইয়াগুদেব

Answer 2

আমার দৃষ্টিতে আপনার অবশ্যই নিখুঁত উত্তরটি প্রয়োজন

var reader = new FileReader();

//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {

//Initiate the JavaScript Image object.
var image = new Image();

//Set the Base64 string return from FileReader as source.
image.src = e.target.result;

//Validate the File Height and Width.
image.onload = function () {
  var height = this.height;
  var width = this.width;
  if (height > 100 || width > 100) {
    alert("Height and Width must not exceed 100px.");
    return false;
  }
  alert("Uploaded image has valid Height and Width.");
  return true;
};

Answer 3

আমি রাজী. একবার এটি অন্য কোথাও আপলোড করা হলে ব্যবহারকারীর ব্রাউজারটি অ্যাক্সেস করতে পারে তারপরে আকারটি পাওয়া খুব সহজ। আপনি মধ্যে হুক করতে চাইবেন আপনি লোড করতে চিত্রের জন্য অপেক্ষা করতে হবে হিসাবে onloadজন্য ইভেন্ট img।

var width, height;

var img = document.createElement("img");
img.onload = function() {
    // `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height
    // The natural size is the actual image size regardless of rendering.
    // The 'normal' width/height are for the **rendered** size.

    width  = img.naturalWidth  || img.width;
    height = img.naturalHeight || img.height; 

    // Do something with the width and height
}

// Setting the source makes it start downloading and eventually call `onload`
img.src = "http://your.website.com/userUploadedImage.jpg";

Answer 4

এটি আকার চেক করার সহজতম উপায়

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   alert(img.width + " " + img.height);
}

নির্দিষ্ট আকারের জন্য পরীক্ষা করুন। উদাহরণস্বরূপ 100 x 100 ব্যবহার করা হচ্ছে

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   if(img.width === 100 && img.height === 100){
        alert(`Nice, image is the right size. It can be uploaded`)
        // upload logic here
        } else {
        alert(`Sorry, this image doesn't look like the size we wanted. It's 
   ${img.width} x ${img.height} but we require 100 x 100 size image.`);
   }                
}

Answer 5

ফাংশনটি বৈধতা (সিটিআরএল) {

        var fileUpload = $("#txtPostImg")[0];


        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {

            if (typeof (fileUpload.files) != "undefined") {

                var reader = new FileReader();

                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {

                    var image = new Image();

                    image.src = e.target.result;
                    image.onload = function () {

                        var height = this.height;
                        var width = this.width;
                        console.log(this);
                        if ((height >= 1024 || height <= 1100) && (width >= 750 || width <= 800)) {
                            alert("Height and Width must not exceed 1100*800.");
                            return false;
                        }
                        alert("Uploaded image has valid Height and Width.");
                        return true;
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }

Comments

সম্পূর্ণ কোডটি ফর্ম্যাট করার চেষ্টা করুন এবং আপনার কোডটিতে আপনি কী করেছেন তার একটি সামান্য বর্ণনা সরবরাহ করুন।

— জিশান আদিল

Answer 6

ইনপুট টাইপ ফাইল / অনচেঞ্জ = "ভ্যালাইটিইমগ (এটি)" / এর ওচেন্জ পদ্ধতিতে ফাংশনটি সংযুক্ত করুন

   function validateimg(ctrl) { 
        var fileUpload = ctrl;
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (fileUpload.files) != "undefined") {
                var reader = new FileReader();
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var height = this.height;
                        var width = this.width;
                        if (height < 1100 || width < 750) {
                            alert("At least you can upload a 1100*750 photo size.");
                            return false;
                        }else{
                            alert("Uploaded image has valid Height and Width.");
                            return true;
                        }
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }

Answer 7

    const ValidateImg = (file) =>{
        let img = new Image()
        img.src = window.URL.createObjectURL(file)
        img.onload = () => {
            if(img.width === 100 && img.height ===100){
                alert("Correct size");
                return true;
            }
            alert("Incorrect size");
            return true;
        }
    }

Answer 8

function uploadfile(ctrl) {
    var validate = validateimg(ctrl);

    if (validate) {
        if (window.FormData !== undefined) {
            ShowLoading();
            var fileUpload = $(ctrl).get(0);
            var files = fileUpload.files;


            var fileData = new FormData();


            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }


            fileData.append('username', 'Wishes');

            $.ajax({
                url: 'UploadWishesFiles',
                type: "POST",
                contentType: false,
                processData: false,
                data: fileData,
                success: function(result) {
                    var id = $(ctrl).attr('id');
                    $('#' + id.replace('txt', 'hdn')).val(result);

                    $('#imgPictureEn').attr('src', '../Data/Wishes/' + result).show();

                    HideLoading();
                },
                error: function(err) {
                    alert(err.statusText);
                    HideLoading();
                }
            });
        } else {
            alert("FormData is not supported.");
        }

    }

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! দয়া করে কেবল উত্স কোড দিয়ে উত্তর দিবেন না। আপনার সমাধান কীভাবে কাজ করে সে সম্পর্কে একটি দুর্দান্ত বর্ণনা দেওয়ার চেষ্টা করুন। দেখুন: আমি কীভাবে ভাল উত্তর লিখব? । ধন্যবাদ

— সুনি ןɐ কিউপি