কোনও চিত্র আপলোড হওয়ার আগে তার পূর্বরূপ দেখুন

Question

আমি কোনও ফাইল (চিত্র) আপলোড হওয়ার আগে পূর্বরূপ দেখতে সক্ষম হতে চাই। চিত্রটি আপলোড করতে অ্যাজাক্স ব্যবহার না করে ব্রাউজারে পূর্বরূপ ক্রিয়াটি কার্যকর করা উচিত।

কিভাবে আমি এটি করতে পারব?

Comments

মনে রাখবেন যে আপনি গিয়ার্স বা অন্য কোনও প্লাগইন ব্যবহার না করে আপনি ব্রাউজারের অভ্যন্তরে চিত্রটি ম্যানিপুলেট করতে পারবেন না: কোড. google.com/p/chromium/issues/detail?id=32276

— স্টিভ-ও

এই উত্তরটি সহ শুদ্ধ জাভাস্ক্রিপ্ট পদ্ধতির চেক করুন এবং সেখানে চূড়ান্ত সমাধানের জন্য রে নিকোলাসের মন্তব্য: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / ১64৪৩০০16/…

— জোনাথন রুট

এখানে লাইভ ডেমো কোডিপিডিয়া.info

— সাতিন্দর সিং

এখানে একটি সহজ সমাধান যা জ্যাকোয়ারি ব্যবহার করে না: ডেভেলপার.মোজিলা.আর.ইন.ইউএস

— জন গিলমার

angulartutorial.net/2017/02/…

— প্রশোভ

Answer 1

নীচের নমুনা কোডটি একবার দেখুন:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

এছাড়াও, আপনি এই নমুনা এখানে চেষ্টা করতে পারেন ।

Comments

আপনি একবার পাঠককে সংজ্ঞায়িত করে কিছুটা পারফরম্যান্সের উন্নতি করতে পারেন। jsfiddle.net/LvsYc/638

— Jaider

কেন ব্যবহারের jQuery এর `$ ( '# বাজে কথা') ATTR ( 'src', e.target.result);` যখন আপনি কেবল কাজ করতে পারে।document.getElementById('blah').src=e.target.result)

— EasyBB

আমি এটির একটি রিঅ্যাক্টজেএস বাস্তবায়ন করেছি । একটি যাদুমন্ত্র মত কাজ করে. @kxc আপনার একটি অজ্যাক্স কল করা উচিত এবং input.files[0]ডেটা হিসাবে প্রেরণ করা উচিত , jQuery এর ডকটি দেখুন ।

— সুমি স্ট্রেসেল

@ ইভানবায়েভের input.files[0]পুরো পথ নেই। ফাইলরেডার ফাইলটি কীভাবে সনাক্ত করবে?

— পুরাতন গিজার

কিছু যায় আসে না, যখনই আপনি jqueryটি ফুলে যাওয়ার কারণে ব্যবহার করতে পারবেন না এবং ভ্যানিলা আপনাকে দ্রুত ফলাফল দেবে বিশেষত যদি আপনার কাছে প্রচুর স্ক্রিপ্ট থাকে।

— ইজিবিবি

Answer 2

আপনি এটি করতে পারেন এমন কয়েকটি উপায় রয়েছে। সবচেয়ে কার্যকর উপায় ব্যবহার করতে হবে URL.createObjectURL () উপর ফাইল আপনার থেকে <ইনপুট> । সরবরাহকৃত চিত্রটি লোড করার জন্য ব্রাউজারকে বলতে এই URL টি img.src এ পাস করুন ।

এখানে একটি উদাহরণ:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

আপনি নিজের <ইনপুট> থেকে ফাইলটি বিশ্লেষণ করতে ফাইলআরেডার.ড্রেডআসডাটা URL () ব্যবহার করতে পারেন । এটি মেমরিতে একটি স্ট্রিং তৈরি করবে যা চিত্রের একটি বেস 64 প্রতিনিধিত্ব করে।

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

Comments

সাবধানে পড়ুন: পড়ুনএএসডাটা URL এবং createObjectURL ব্রাউজারে একটি চিত্র ক্যাশে করবে, তারপরে একটি বেস 64 এনকোডযুক্ত স্ট্রিংটি ফিরিয়ে দেবে যা ক্যাশে চিত্রটির অবস্থান উল্লেখ করে। যদি ব্রাউজারের ক্যাশে সাফ হয়ে যায়, তবে বেস 64 এনকোডড স্ট্রিংটি আর চিত্রটির উল্লেখ করবে না। বেস 64 স্ট্রিংটি প্রকৃত চিত্রের ডেটা নয়, এটি চিত্রটির url রেফারেন্স এবং আপনার চিত্রের ডেটা পুনরুদ্ধার করার আশায় এটি কোনও ডেটাবেজে সংরক্ষণ করা উচিত নয়। আমি সম্প্রতি এই ভুলটি করেছি (প্রায় 3 মিনিট আগে)।

— টিফমন্টিগ

মেমরির সমস্যাগুলি এড়াতে URL.revokeObjectURLআপনার ব্লবটি শেষ হয়ে গেলে আপনাকে কল করা উচিত

— অ্যাপোলো

: @Apolo না এই ক্ষেত্রে, এই উত্তর দেখুন stackoverflow.com/a/49346614/2313004

— grreeenn

আপনার সমাধান চেষ্টা করে .... ধন্যবাদ

— অজয় কুমার

Answer 3

এক-লাইন সমাধান:

নিম্নলিখিত কোডটি অবজেক্ট ইউআরএলগুলি ব্যবহার করে, যা বৃহত্তর চিত্রগুলি দেখার জন্য ডেটা ইউআরএল থেকে অনেক বেশি দক্ষ (একটি ডেটা ইউআরএল একটি বিশাল স্ট্রিং যা সমস্ত ফাইল ডেটা সম্বলিত, যেখানে একটি অবজেক্ট ইউআরএল, কেবলমাত্র একটি ছোট স্ট্রিং যা ফাইল ডেটা ইনফারেন্স করে থাকে- স্মৃতি):

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

উত্পন্ন URL টি এর মতো হবে:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

Comments

@ র্যাপ্টর এবং একইভাবে পুরো ফাইল এপিআই ... ( FileReader, input.filesইত্যাদি) URL.createObjectURLব্যবহারকারী জমা দেওয়া ফাইলগুলির সাথে কাজ করার সময় চলে যেতে পারে, এটি কেবল ব্যবহারকারীর ডিস্কে আসল ফাইলটিতে একটি মেমরি-ইন-মেমরি সিএমিলিং তৈরি করে।

— কাইদো

@cnlevy কীভাবে আমরা আপলোড করা ফাইলগুলিতে অ্যাক্সেস করতে পারি? আপনি উল্লিখিত হিসাবে এটি কি কেবল ইউআরএল থেকে পাওয়া সম্ভব? সুনির্দিষ্টভাবে বলতে গেলে, আমি ফ্ল্যাশ ব্যবহার করছি যা ইতিমধ্যে আপলোড করা ফাইলগুলিতে অ্যাক্সেস সমর্থন করে। এই ওয়ান-লাইনারের সাথে অন্য কোনও উপায় আছে?

— অভিষেক সিং

এটি সর্বকালের সেরা উত্তর

— নাভিদ ফরজাদ

এই সমাধানটি আমার পক্ষে কার্যকর হয়নি। চিত্রের পূর্বরূপ প্রদর্শিত হচ্ছে না।

— সুন্দরমূর্তি জে

সেরা উত্তর! আপনাকে ধন্যবাদ

— A7madev

Answer 4

লেসটাটিটির উত্তর এফএফ এবং ক্রোমের মতো "স্ট্যান্ডার্ড" ব্রাউজারগুলিতে ভাল কাজ করে। IE এর সমাধানটি বিদ্যমান তবে ভিন্ন দেখাচ্ছে। ক্রস ব্রাউজার সমাধানের বিবরণ এখানে:

এইচটিএমএলে আমাদের imgস্ট্যান্ডার্ড ব্রাউজারগুলির divজন্য এবং আইই এর জন্য দুটি পূর্বরূপ উপাদান প্রয়োজন

এইচটিএমএল:

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

<div id="preview_ie"></div>

সিএসএসে আমরা নিম্নলিখিত আইই নির্দিষ্ট জিনিসটি নির্দিষ্ট করি:

সিএসএস:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}  

এইচটিএমএলে আমরা মান এবং আই-নির্দিষ্ট জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করি:

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

pic_preview.jsLeassTaTT এর উত্তর থেকে javascript হয়। $('#blah')Whith প্রতিস্থাপন $('#preview')এবং যোগ করুন$('#preview').show()

এখন আইই নির্দিষ্ট জাভাস্ক্রিপ্ট (pic_preview_ie.js):

function readURL (imgFile) {    
  var newPreview = document.getElementById('preview_ie');
  newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
  newPreview.style.width = '160px';
  newPreview.style.height = '120px';
}    

তা হ'ল আই 7, আই 8, এফ এফ এবং ক্রোমে কাজ করে। আইই 9 তে পরীক্ষা করে রিপোর্ট করুন। আইই পূর্বরূপের ধারণাটি এখানে পাওয়া গেছে: http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

Answer 5

আমি ইভানের উত্তরটি সম্পাদনা করেছি "কোন পূর্বরূপ উপলব্ধ নয়" চিত্রটি প্রদর্শন করার জন্য, যদি এটি চিত্র না থাকে:

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

Answer 6

ইভান বাভের উত্তরের উপর ভিত্তি করে এখানে একাধিক ফাইল সংস্করণ রয়েছে।

এইচটিএমএল

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

জাভাস্ক্রিপ্ট / jQuery

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

P। পার্সএইচটিএমএল ব্যবহারের কারণে jQuery 1.8 প্রয়োজন, যা এক্সএসএস প্রশমিতকরণে সহায়তা করা উচিত।

এটি বাক্সের বাইরে কাজ করবে এবং আপনার একমাত্র নির্ভরতা হ'ল jQuery।

Answer 7

হ্যাঁ. এটা সম্ভব.

এইচটিএমএল

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

জাতীয়

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

আপনি এখান থেকে লাইভ ডেমো পেতে পারেন ।

Answer 8

পরিষ্কার এবং সাধারণ জেএসফিডাল

আপনি যখন ইভেন্টটি পরোক্ষভাবে একটি ডিভ বা বোতাম থেকে ট্রিগার করতে চান তখন এটি কার্যকর হবে।

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

Comments

কেবলমাত্র একটি দ্রষ্টব্য: আমি এর জন্য ক্রেডিট নিতে পারি না তবে আপনি <label>পুরোপুরি বোতাম ক্লিক করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে এবং এড়াতে পারেন । খাঁটি এইচটিএমএল / সিএসএস সহ ফাইল-ইনপুট ট্রিগার করুন। , এবং এটি মোটেই হ্যাকি নয়।

— নিয়মিত জো

Answer 9

জাভাস্ক্রিপ্ট (jQuery) এবং এইচটিএমএল 5 ব্যবহার করে একাধিক চিত্রের উদাহরণ

জাভাস্ক্রিপ্ট (jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

মার্কআপ (এইচটিএমএল)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

Answer 10

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

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

সম্ভবত আমার কোডটি কিছু ব্যবহারকারীর মতো ভাল নয় তবে আমি মনে করি আপনি এটির পয়েন্ট পাবেন। এখানে আপনি একটি উদাহরণ দেখতে পারেন

Answer 11

ওয়ার্কিং কোডটি নিম্নলিখিত

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

Answer 12

প্রতিক্রিয়া হিসাবে, ফাইলটি যদি আপনার প্রপসগুলিতে থাকে তবে আপনি ব্যবহার করতে পারেন:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

Comments

এটি আমার জীবন বাঁচায়! ফাইলআরডার ব্যবহার করে প্রতিক্রিয়ার সমাধানের চেয়ে অনেক বেশি সহজ

— জোনাথন

Answer 13

এই সমাধান সম্পর্কে কি?

এই জাতীয় চিত্রের জন্য কেবল "ডেটা-টাইপ = সম্পাদনাযোগ্য" ডেটা অ্যাট্রিবিউট যুক্ত করুন:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

এবং আপনার প্রকল্পের বাইরে স্ক্রিপ্ট ...

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// /programming/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

জেএসফিডেলে ডেমো দেখুন

Answer 14

এটা চেষ্টা কর

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}

<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">

Answer 15

JQuery / জাভাস্ক্রিপ্ট ব্যবহার করে একাধিক চিত্র আপলোড হওয়ার আগে পূর্বরূপ দেখুন?

এটি একসাথে একাধিক ফাইলকে থাম্বনেইল চিত্র হিসাবে পূর্বরূপ করবে

এইচটিএমএল

<input id="ImageMedias" multiple="multiple" name="ImageMedias" type="file"
accept=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input"  value="">                                    
<div id="divImageMediaPreview"></div>

লিপি

$("#ImageMedias").change(function () {
    if (typeof (FileReader) != "undefined") {
        var dvPreview = $("#divImageMediaPreview");
        dvPreview.html("");            
        $($(this)[0].files).each(function () {
            var file = $(this);                
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "width: 150px; height:100px; padding: 10px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);                
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

কোডেপেনে কাজ করা ডেমো

জেসফিডেলে কাজ করা ডেমো

আমি আশা করি এটি সাহায্য করবে

Answer 16

আমি এমন একটি প্লাগইন তৈরি করেছি যা ইন্টারনেট 7++ এর জন্য পূর্বরূপ প্রভাব তৈরি করতে পারে তবে এর কিছু সীমাবদ্ধতা রয়েছে। আমি এটি একটি গিথব পৃষ্ঠায় রেখেছি যাতে এটি এটির পক্ষে সহজ

$(function () {
		$("input[name=file1]").previewimage({
			div: ".preview",
			imgwidth: 180,
			imgheight: 120
		});
		$("input[name=file2]").previewimage({
			div: ".preview2",
			imgwidth: 90,
			imgheight: 90
		});
	});

.preview > div {
  display: inline-block;
  text-align:center;
}

.preview2 > div {
  display: inline-block; 
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
	Preview
	<div class="preview"></div>
	Preview2
	<div class="preview2"></div>

	<form action="#" method="POST" enctype="multipart/form-data">
		<input type="file" name="file1">
		<input type="file" name="file2">
		<input type="submit">
	</form>

Answer 17

একাধিক চিত্র আপলোডের জন্য (@ ইভানবাভের সমাধানে পরিবর্তন)

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

আশা করি এটি কাউকে সাহায্য করবে।

Answer 18

এটি আমার কোড S সমর্থন আইই [6-9] rome ক্রোম 17 + 、 ফায়ারফক্স 、 অপেরা 11 + 、 ম্যাক্সথন 3

   
function previewImage(fileObj, imgPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png";  //allowed to upload file type
    document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("don't support  Safari6.0 below broswer");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                fileObj.blur(); 
                var newPreview = document.getElementById(imgPreviewId);

                newPreview.style.border = "solid 1px #eeeeee";
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                newPreview.style.display = "block";

            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7 below
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+ 
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("only support" + allowExtention + "suffix");
        fileObj.value = ""; //clear Selected file
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }

    }
}
function changeFile(elem) {
    //file object , preview img tag id
    previewImage(elem,'imagePreview')
}

<input type="file"  id="netBarBig"  onchange="changeFile(this)"  />
<img  src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>

Answer 19

ডিফল্ট Iamge

                @Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" })
                @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" })
                    <img src="~/img/ApHandler.png"  style="height:125px; width:125px" id="DefaultImagePreview"/>
            </div>

 <script>
    var openFile = function (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function () {
            var dataURL = reader.result;
            var output = document.getElementById('DefaultImagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>

Answer 20

যদি আপনি প্রতিক্রিয়া ব্যবহার করেন তবে এখানে একটি সমাধান রয়েছে:

import * as React from 'react'
import { useDropzone } from 'react-dropzone'

function imageDropper() {
  const [imageUrl, setImageUrl] = React.useState()
  const [imageFile, setImageFile] = React.useState()

  const onDrop = React.useCallback(
    acceptedFiles => {
      const file = acceptedFiles[0]
      setImageFile(file)

      // convert file to data: url
      const reader = new FileReader()
      reader.addEventListener('load', () => setImageUrl(String(reader.result)), false)
      reader.readAsDataURL(file)
    },
    [setImageFile, setImageUrl]
  )
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
    <div>
      <div {...getRootProps()}>
        {imageFile ? imageFile.name : ''}
        {isDragActive ? <p>Drop files here...</p> : <p>Select image file...</p>}
        <input {...getInputProps()} />
      </div>
      {imageUrl && (
        <div>
          Your image: <img src={imageUrl} />
        </div>
      )}
    </div>
  )
}

Answer 21

এনক্রিপ্ট করা জিইটি ইউআরএল প্যারামিটার সহ আমার অ্যাপ্লিকেশনটির জন্য, কেবল এটিই কাজ করেছে। আমি সবসময় একটি পেয়েছিলাম TypeError: $(...) is null। Https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL থেকে নেওয়া হয়েছে

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Answer 22

function assignFilePreviews() {
    $('input[data-previewable=\"true\"]').change(function() {
        var prvCnt = $(this).attr('data-preview-container');
        if (prvCnt) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.error(function() {
                        $(prvCnt).html('');
                    });
                    $(prvCnt).html('');
                    img.appendTo(prvCnt);
                }
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
}
$(document).ready(function() {
    assignFilePreviews();
});

এইচটিএমএল

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

অবৈধ প্রকারের ফাইল (উদাহরণস্বরূপ পিডিএফ) চয়ন করা হলে এটি কেস পরিচালনা করে