පින්තූරයක් උඩුගත කිරීමට පෙර එය පෙරදසුන් කරන්න

ගොනුවක් (රූපය) උඩුගත කිරීමට පෙර එය පෙරදසුන් කිරීමට මට අවශ්‍යය. රූපය උඩුගත කිරීම සඳහා අජැක්ස් භාවිතා නොකර පෙරදසුන ක්‍රියාව බ්‍රව්සරයේ සියල්ලම ක්‍රියාත්මක කළ යුතුය.

මට මෙය කළ හැක්කේ කෙසේද?

කරුණාකර පහත නියැදි කේතය දෙස බලන්න:

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>

එසේම, ඔබට මෙම නියැදිය මෙතැනින් උත්සාහ කළ හැකිය .

ඔබට මෙය කළ හැකි ක්‍රම කිහිපයක් තිබේ. වඩාත් කාර්යක්ෂම ක්රමයක් භාවිතා කිරීමට වනු ඇත URL.createObjectURL () මත ගොනුව ඔබගේ <input> . සපයන ලද පින්තූරය පූරණය කරන ලෙස බ්‍රව්සරයට පැවසීමට මෙම 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>

ඔබගේ <input> වෙතින් ගොනුව විග්‍රහ කිරීමට ඔබට FileReader.readAsDataURL () භාවිතා කළ හැකිය . මෙය රූපයේ base64 නිරූපණයක් අඩංගු මතකයේ නූලක් නිර්මාණය කරයි.

<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>

එක් ලයිනර් විසඳුම:

පහත දැක්වෙන කේතය වස්තු 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

LeassTaTT හි පිළිතුර FF සහ Chrome වැනි “සම්මත” බ්‍රව්සර් තුළ හොඳින් ක්‍රියාත්මක වේ. IE සඳහා විසඳුම පවතින නමුත් වෙනස් ලෙස පෙනේ. හරස් බ්‍රව්සර් විසඳුම පිළිබඳ විස්තරය මෙන්න:

HTML හි අපට imgසම්මත බ්‍රව්සර් divසඳහා සහ IE සඳහා පෙරදසුන අංග දෙකක් අවශ්‍ය වේ

HTML:

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

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

CSS හි අපි පහත දැක්වෙන IE විශේෂිත දේ සඳහන් කරමු:

CSS:

#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.jsවන LeassTaTT පිළිතුර සිට ජාවාස්ක්රිප්ට් වේ. $('#blah')සුදු පැහැය ප්‍රතිස්ථාපනය කර $('#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

මම සංස්කරණය කර ඇත “පෙරදසුනක් නොමැත” රූපය පෙන්වීමට අයිවන්ගේ පිළිතුර, එය රූපයක් නොවේ නම්:

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

මෙන්න බහු ගොනුඅයිවන් බේව්ගේ පිළිතුර මත පදනම්ව අනුවාදයක් .

HTML

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

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

Q .parseHTML භාවිතය නිසා jQuery 1.8 අවශ්‍ය වේ, එය XSS අවම කිරීම සඳහා උපකාරී වේ.

මෙය කොටුවෙන් පිටත ක්‍රියාත්මක වන අතර ඔබට අවශ්‍ය එකම පරායත්තතාව jQuery වේ.

ඔව්. එය කළ හැකි ය.

Html

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

ඔබට මෙතැන් සිට සජීවී නිරූපණය ලබා ගත හැකිය.

පිරිසිදු හා සරල 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>

JavaScript (jQuery) සහ HTML5 භාවිතා කරමින් බහු පින්තූර සහිත උදාහරණය

JavaScript (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>

ගොනුව පටවන සහ අභිරුචි සිදුවීමක් විදහා දක්වන ශ්‍රිතයක් නිර්මාණය කරන්නේ කෙසේද? ඉන්පසු සවන්දෙන්නෙකු ආදානයට අමුණන්න. මේ ආකාරයෙන් අපට ගොනුව භාවිතා කිරීමට වැඩි නම්යතාවයක් ඇත, රූප පෙරදසුන් කිරීම සඳහා පමණක් නොවේ.

/**
 * @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)

සමහර විට මගේ කේතය සමහර පරිශීලකයින් තරම් හොඳ නැති නමුත් මම හිතන්නේ ඔබට එහි තේරුම ලැබෙනු ඇත. මෙහිදී ඔබට උදාහරණයක් දැකිය හැකිය

පහත දැක්වෙන්නේ වැඩ කිරීමේ කේතයයි.

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

ප්‍රතික්‍රියා කිරීමේදී, ගොනුව ඔබේ මුක්කු වල තිබේ නම්, ඔබට මෙය භාවිතා කළ හැකිය:

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

මෙය සරලම ක්‍රමයයි

අජැක්ස් හෝ කිසිදු සංකීර්ණ කාර්යයක් භාවිතා නොකර රූපය බ්‍රව්සරයෙන් සර්වරයට උඩුගත කිරීමට පෙර එය පෙරදසුන් කිරීම.

රූපය පූරණය කිරීමට එයට " onChange " සිදුවීමක් අවශ්‍ය වේ.

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

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

රූපයක් තේරීමෙන් පසු රූපය රාමුව තුළ වහාම පටවනු ලැබේ.

මෙම විසඳුම ගැන කුමක් කිව හැකිද?

මේ ආකාරයේ රූප ටැගයකට "data-type = editable" යන දත්ත ගුණාංගය එක් කරන්න:

<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 හි නිරූපණය බලන්න

මේක උත්සාහ කරන්න

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">

JQuery / javascript භාවිතයෙන් පින්තූර කිහිපයක් උඩුගත කිරීමට පෙර එය පෙරදසුන් කරන්න?

මෙය වරකට බහු ලිපිගොනු සිඟිති රූප ලෙස පෙරදසුන් කරනු ඇත

Html

<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 හි වැඩ කරන නිරූපණය

මෙය උපකාරී වනු ඇතැයි මම බලාපොරොත්තු වෙමි.

අන්තර්ජාලයට ස්තූතිවන්ත වන පරිදි 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>

බහු පින්තූර උඩුගත කිරීම සඳහා (@ අයිවන්බේව්ගේ විසඳුම වෙනස් කිරීම)

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/

මෙය යමෙකුට උපකාරී වේ යැයි සිතමි.

එය මගේ කේතයයි. සහය අයිඊ [6-9] 、 ක්‍රෝම් 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=""/>

පෙරනිමි 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>

ඔබ ප්‍රතික්‍රියා භාවිතා කරන්නේ නම් මෙන්න විසඳුම:

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

මගේ යෙදුම සඳහා, සංකේතාත්මක 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...">

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

HTML

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

අවලංගු වර්ගයක් සහිත (උදා: පීඩීඑෆ්) ගොනුව තේරූ විට මෙයද නඩුව හසුරුවයි