अपलोड होने से पहले एक छवि का पूर्वावलोकन करें

Question

मैं अपलोड होने से पहले किसी फ़ाइल (छवि) का पूर्वावलोकन करने में सक्षम होना चाहता हूं। छवि को अपलोड करने के लिए अजाक्स का उपयोग किए बिना पूर्वावलोकन कार्रवाई को सभी ब्राउज़र में निष्पादित किया जाना चाहिए।

मैं यह कैसे कर सकता हूँ?

Comments

ध्यान दें कि जब तक आप गियर्स या किसी अन्य प्लगइन का उपयोग नहीं करते हैं, तब तक आप ब्राउज़र के अंदर की छवि को हेरफेर नहीं कर सकते हैं: code.google.com/p/chromium/issues/detail?id=32276

— स्टीव-ओ

इस शुद्ध जावास्क्रिप्ट दृष्टिकोण की जांच करें, जिसमें इसका उत्तर भी शामिल है और अंतिम समाधान के लिए रे निकोलस की टिप्पणी है: stackoverflow.com/questions/16430016/…

— जोनाथन रूट

यहाँ लाइव डेमो codepedia.info/2015/06/… के

— सतिंदर सिंह

यहाँ एक सरल उपाय है जो jquery का उपयोग नहीं करता है: developer.mozilla.org/en-US/docs/Web/API/FileReader/…

— John Gilmer

angulartutorial.net/2017/02/…

— Prashobh

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

— जैदर

JQuery का उपयोग '$' ('# blah') के लिए क्यों करें। Attr ('src', document.getElementById('blah').src=e.target.result)

— e.target .result

मैंने इसका एक रिएक्टजेएस लागू किया । एक जादू की तरह काम करता है। @kxc आपको एक अजाक्स कॉल करना चाहिए और input.files[0]डेटा के रूप में भेजना चाहिए , देखें jQuery का डॉक ।

— सुमी स्ट्रैसल

@ इवानबाव के input.files[0]पास पूरा रास्ता नहीं है। FileReader फ़ाइल का पता कैसे लगाता है?

— पुराना गीजर

कोई फर्क नहीं पड़ता, जब भी आप 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>

आप फ़ाइल को अपने <इनपुट> से पार्स करने के लिए FileReader.readAsDataURL () का भी उपयोग कर सकते हैं । यह मेमोरी में एक स्ट्रिंग बनाएगा जिसमें छवि का बेस 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

ध्यान से पढ़ें: readAsDataURL और createObjectURL ब्राउज़र में एक छवि को कैश करेगा, फिर एक बेस 64 एन्कोडेड स्ट्रिंग लौटाएगा जो कैश में छवि स्थान को संदर्भित करता है। यदि ब्राउज़र कैश साफ़ हो जाता है, तो बेस 64 एनकोडेड स्ट्रिंग अब छवि को संदर्भित नहीं करेगा। Base64 स्ट्रिंग वास्तविक छवि डेटा नहीं है, यह छवि का url संदर्भ है, और आपको छवि डेटा पुनर्प्राप्त करने की उम्मीद करने वाले डेटाबेस में इसे सहेजना नहीं चाहिए। मैंने हाल ही में यह गलती की है (लगभग 3 मिनट पहले)।

— tfmontague

स्मृति मुद्दों से बचने के लिए आपको कॉल करना चाहिए URL.revokeObjectURLजब आप अपने बूँद के साथ कर रहे हैं

— अपोलो

@ अपोलो इस मामले में नहीं, इस उत्तर को देखें: stackoverflow.com/a/49346614/2313004

— 22

आपके समाधान की कोशिश .... धन्यवाद

— अजय कुमार

Answer 3

एक-लाइनर समाधान:

निम्न कोड ऑब्जेक्ट URL का उपयोग करता है, जो बड़ी छवियों को देखने के लिए डेटा URL की तुलना में बहुत अधिक कुशल है (एक डेटा URL एक विशाल स्ट्रिंग है जिसमें सभी फ़ाइल डेटा होते हैं, जबकि एक ऑब्जेक्ट URL, फ़ाइल डेटा को संदर्भित करने वाला एक छोटा स्ट्रिंग है- याद):

<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 हम अपलोड की गई फ़ाइलों तक कैसे पहुंच सकते हैं? क्या केवल URL से इसे प्राप्त करना संभव है जैसा कि आपने उल्लेख किया है? विशिष्ट होने के लिए, मैं फ्लास्क का उपयोग कर रहा हूं जो पहले से अपलोड की गई फ़ाइलों के उपयोग का समर्थन करता है। क्या इस वन-लाइनर के साथ कोई और तरीका है?

— अभिषेक सिंह

यह अब तक का सबसे अच्छा जवाब है

— नवेद फरजाद

इस समाधान ने मेरे लिए काम नहीं किया। छवि पूर्वावलोकन नहीं दिखा रहा है।

— सुंदरमूर्ति J

सबसे बढ़िया उत्तर! धन्यवाद

— A7madev

Answer 4

LeassTaTT का उत्तर एफएफ और क्रोम जैसे "मानक" ब्राउज़रों में अच्छी तरह से काम करता है। IE के लिए समाधान मौजूद है, लेकिन अलग दिखता है। यहाँ क्रॉस-ब्राउज़र समाधान का वर्णन है:

HTML में हम दो पूर्वावलोकन तत्वों, जरूरत imgमानक ब्राउज़र के लिए और divके लिए आईई

HTML:

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

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

CSS में हम निम्नलिखित IE विशिष्ट बात निर्दिष्ट करते हैं:

सीएसएस:

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

HTML में हम मानक और IE- विशिष्ट जावास्क्रिप्ट शामिल हैं:

<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 के जवाब से जावास्क्रिप्ट है। बदलें $('#blah')whith $('#preview')और जोड़ने$('#preview').show()

अब IE विशिष्ट जावास्क्रिप्ट (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';
}    

यानी कि। IE7, IE8, FF और Chrome में काम करता है। कृपया IE9 में परीक्षण करें और रिपोर्ट करें। IE पूर्वावलोकन का विचार यहां पाया गया: 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

इवान बेव के उत्तर के आधार पर, एक एकाधिक फ़ाइलों का संस्करण है।

HTML

<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');
    });
});

$ .ParseHTML के उपयोग के कारण jQuery 1.8 की आवश्यकता है, जिसे XSS शमन में मदद करनी चाहिए।

यह बॉक्स से बाहर काम करेगा, और केवल निर्भरता जो आपको चाहिए वह है 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

साफ और सरल JSfiddle

यह तब उपयोगी होगा जब आप चाहते हैं कि घटना अप्रत्यक्ष रूप से एक div या एक बटन से शुरू हो।

<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>बटन को पूरी तरह से हैंडल करने के लिए आप जावास्क्रिप्ट का उपयोग कर सकते हैं और इससे बच सकते हैं। शुद्ध HTML / CSS के साथ ट्रिगर फ़ाइल-इनपुट। , और यह बिल्कुल भी हैक नहीं है।

— नियमित जो

Answer 9

जावास्क्रिप्ट (jQuery) और HTML5 का उपयोग करके कई छवियों के साथ उदाहरण

जावास्क्रिप्ट (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);
    });
}

मार्कअप (HTML)

<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

इससे मेरी जान बच गई! FileReader का उपयोग करके प्रतिक्रिया समाधान की तुलना में बहुत सरल

— जोनाथन

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!
}));

JSFiddle पर डेमो देखें

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.");
    }
});

कोडपेन पर वर्किंग डेमो

Jsfiddle पर कार्यशील डेमो

मुझे उम्मीद है कि इससे सहायता मिलेगी।

Answer 16

मैंने एक प्लगइन बनाया है जो IE 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

एकाधिक छवि अपलोड के लिए (@ IvanBaev के समाधान में संशोधन)

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

यह मेरा कोड है। आईई [6-9] 、 क्रोम 17 + 、 फ़ायरफ़ॉक्स 11 ओपेरा 11 + on मैक्सथन 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

अजाक्स या किसी भी जटिल कार्यों का उपयोग किए बिना ब्राउज़र से सर्वर पर अपलोड करने से पहले छवि का पूर्वावलोकन करने के लिए यहां एक सरल विधि है। छवि को लोड करने के लिए इसे "ऑन्चेंज" इवेंट की आवश्यकता है।

<div>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</div>

<script>
    function preview() {
      frame.src=URL.createObjectURL(event.target.files[0]);
    }
</script>

छवि को चुनने के तुरंत बाद लोड किया जाएगा।

यह देखने के लिए इस लिंक पर क्लिक करें कि यह कैसे काम करता है https://youtu.be/7_lGhrYZJWw

Answer 22

मेरे ऐप के लिए, GET url पैरामीटर्स को एन्क्रिप्ट किया गया था, केवल इसने काम किया। मुझे हमेशा ए 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 23

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>

यह तब भी होता है जब अवैध प्रकार (उदा। Pdf) वाली फ़ाइल को चुना जाता है