javascript - এটি আপলোড করার আগে একটি ছবি প্রাকদর্শন




jquery file-upload (12)

LeassTaTT এর উত্তর FF এবং Chrome এর মতো "মানক" ব্রাউজারগুলিতে ভালভাবে কাজ করে। IE এর জন্য সমাধান বিদ্যমান, কিন্তু ভিন্ন দেখায়। এখানে ক্রস ব্রাউজার সমাধান বর্ণনা:

এইচটিএমএল মধ্যে আমরা দুটি প্রাকদর্শন উপাদান প্রয়োজন, আদর্শ ব্রাউজার এবং IM জন্য ডিভি জন্য img

এইচটিএমএল:

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

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

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

সিএসএস:

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

এইচটিএমএল মধ্যে আমরা স্ট্যান্ডার্ড এবং 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') প্রতিস্থাপন করুন $('#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 এবং ক্রোমে কাজ করে। IE9 এবং রিপোর্ট পরীক্ষা করুন। IE পূর্বরূপের ধারণা এখানে পাওয়া গিয়েছে: http://forums.asp.net/t/1320559.aspx

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

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

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


অনুগ্রহ করে নিচের নমুনা কোডটি দেখুন:

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>

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


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

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


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

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


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

এইচটিএমএল

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

$ 1.8 পার্সেস ব্যবহার করার জন্য 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 এ ডেমো দেখুন


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

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/

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


এটা চেষ্টা কর

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 দেখতে পারেন


জাভাস্ক্রিপ্ট (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);
    });
}

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

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

পরিষ্কার এবং সহজ JSfiddle

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

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

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

এইচটিএমএল

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

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





file-upload