(function($) { var defaults; $.event.fix = (function(originalFix) { return function(event) { event = originalFix.apply(this, arguments); if (event.type.indexOf("copy") === 0 || event.type.indexOf("paste") === 0) { event.clipboardData = event.originalEvent.clipboardData; } return event; }; })($.event.fix); defaults = { callback: $.noop, matchType: /image.*/ }; return ($.fn.pasteImageReader = function(options) { if (typeof options === "function") { options = { callback: options }; } options = $.extend({}, defaults, options); return this.each(function() { var $this, element; element = this; $this = $(this); return $this.bind("paste", function(event) { var clipboardData, found; found = false; clipboardData = event.clipboardData; return Array.prototype.forEach.call(clipboardData.types, function(type, i) { var file, reader; if (found) { return; } if ( type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType) ) { file = clipboardData.items[i].getAsFile(); reader = new FileReader(); reader.onload = function(evt) { return options.callback.call(element, { dataURL: evt.target.result, event: evt, file: file, name: file.name }); }; reader.readAsDataURL(file); return (found = true); } }); }); }); }); })(jQuery); var dataURL, filename; $("html").pasteImageReader(function(results) { filename = results.filename, dataURL = results.dataURL; $data.text(dataURL); $size.val(results.file.size); $type.val(results.file.type); var img = document.createElement("img"); img.src = dataURL; var w = img.width; var h = img.height; $width.val(w); $height.val(h); $(".file-info").remove(); $(".datei").value = dataURL; return $(".file") .css({ backgroundImage: "url(" + dataURL + ")" }) .data({ width: w, height: h }); }); var $data, $size, $type, $width, $height; $(function() { $data = $(".data"); $size = $(".size"); $type = $(".type"); $width = $("#width"); $height = $("#height"); var $this = $(".file"); var bi = $this.css("background-image"); if (bi != "none") { $data.text(bi.substr(4, bi.length - 6)); } $this.addClass("contain"); $width.val($this.data("width")); $height.val($this.data("height")); if ($this.hasClass("contain")) { $this.css({ width: $this.data("width"), height: $this.data("height"), "z-index": "10" }); } else { $this.css({ width: "", height: "", "z-index": "" }); } }); var readURL = function(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { // $('.file').attr('src', e.target.result); dataURL = e.target.result; $data.text(dataURL); var img = document.createElement("img"); img.src = dataURL; $(".file-info").remove(); return $(".file") .css({ backgroundImage: "url(" + dataURL + ")" }); } reader.readAsDataURL(input.files[0]); } } $(".file-upload").on('change', function(){ readURL(this); }); $(".upload-button").on('click', function() { $(".file-upload").click(); }); $(".file").on('click', function() { $(".file-upload").click(); });