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




jquery file-upload (14)

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

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


इवान बेव के जवाब के आधार पर यहां एक से अधिक फाइल संस्करण हैं।

एचटीएमएल

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


इस समाधान के बारे में क्या?

बस इस तरह के एक छवि टैग में डेटा विशेषता "डेटा-प्रकार = संपादन योग्य" जोड़ें:

<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
// https://.com/questions/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">


एक फ़ाइल बनाने के बारे में कैसे एक फ़ाइल को लोड करता है और एक कस्टम घटना को आग लगती है। फिर इनपुट में श्रोता संलग्न करें। इस तरह से छवियों का पूर्वावलोकन करने के लिए, फ़ाइल का उपयोग करने के लिए हमारे पास अधिक लचीलापन नहीं है।

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

शायद मेरा कोड कुछ उपयोगकर्ताओं के जितना अच्छा नहीं है लेकिन मुझे लगता है कि आपको इसका मुद्दा मिल जाएगा। यहां आप एक example देख सकते हैं


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

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/

उम्मीद है कि यह किसी की मदद करता है।


ऐसा कुछ तरीके हैं जो आप कर सकते हैं। आपके <input> से File पर URL.createObjectURL() का सबसे प्रभावी तरीका उपयोग करना होगा। प्रदान की गई छवि को लोड करने के लिए ब्राउज़र को बताने के लिए img.src पर यह URL पास करें।

यहां एक उदाहरण दिया गया है:

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

आप अपने <input> से फ़ाइल को पार्स करने के लिए 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>


कृपया नीचे नमूना कोड देखें:

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

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

इसके अलावा, आप यहां इस नमूना को आजमा सकते हैं


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

मैंने इवान के जवाब को "नो पूर्वावलोकन उपलब्ध" छवि प्रदर्शित करने के लिए संपादित किया है, अगर यह कोई छवि नहीं है:

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

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


यह मेरा कोड है। समर्थन आईई [6-9], क्रोम 17 +, फ़ायरफ़ॉक्स, ओपेरा 11 +, मैक्सथन 3

एचटीएमएल

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

जावास्क्रिप्ट:

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

</script>


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

एचटीएमएल में हमें दो पूर्वावलोकन तत्वों की आवश्यकता है, मानक ब्राउज़रों के लिए आईएमजी और आईई के लिए div

HTML:

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


हाँ। हो सकता है।

एचटीएमएल

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

आप यहां से लाइव डेमो प्राप्त कर सकते हैं।


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>

यह तब भी संभालता है जब अवैध प्रकार (उदा। पीडीएफ) के साथ फ़ाइल का चयन किया जाता है





file-upload