Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
- <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>
- 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';
- }
- 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');
- }
- }
- <input type="file" multiple id="gallery-photo-add">
- <div class="gallery"></div>
- $(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');
- });
- });
- <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 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>
- /**
- * @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)
- <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>
- <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://stackoverflow.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!
- }));
- <input type='file' onchange="readURL(this);" />
- <img id="ShowImage" src="#" />
- 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]);
- }
- }
- 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]);
- }
- }
- }
- <input type="file" id="netBarBig" onchange="changeFile(this)" />
- <img src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>
- 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();
- });
Add Comment
Please, Sign In to add comment