- /*
- 从剪切板粘贴图片组件,返回剪切板粘贴图片的base64编码
- 支持:IE11,Firefox,Chrome
- setting = {
- target:"#chat", //目标对象,input组件
- append:"#pasteZone", //图片粘贴的临时div,需要设置contentEditable=true
- appendCSS:{position:"relative",left:"-10000px"},//临时div样式,不能设置display:none样式,否则IE11,Firefox下不能正常运行
- afterPaste:function(data){alert(data)}//粘贴回调,参数为图片粘贴后的base64编码
- };
- */
- function pasteImage(option){
- var setting = option;
- var unSupportPasteImgNotify = true;
- init(setting);
- function init(setting){
- if(isIE11() || isFirefox()){
- initIEOrFireFox(setting);
- }else if(isChrome()){
- initChrome(setting);
- }else{
- $(setting.target).bind("keydown",function(event){
- if(event.ctrlKey==1 && event.keyCode==86){
- notify();
- }
- });
- }
- if(setting.appendCss){
- $(setting.append).css(setting.appendCss);
- }else{
- $(setting.append).css("position","relative").css("left","-10000px");
- }
- }
- function initIEOrFireFox(setting){
- function insertImg(c){
- var appendDiv = $(setting.append);
- var target = $(setting.target);
- if((appendDiv.text().length==0 && appendDiv.html().replace("<br>","").length == 0)&& c>0){
- setTimeout(function(){insertImg(c-1)},200);
- return;
- }else if(c < 1){
- appendDiv.text("");
- alert("粘贴图片失败。");
- return;
- }
- var $img = $("img",appendDiv);
- if($img.length<1){
- target.val(target.val() + appendDiv.text());
- appendDiv.text("");
- }else{
- afterPaste();
- $img.remove();
- }
- }
- $(setting.target).bind("keydown",function(event){
- if(event.ctrlKey==1 && event.keyCode==86){
- $(setting.append).focus();
- insertImg(10);
- }
- });
- }
- function initChrome(setting){
- $(setting.target).bind("paste", function() {
- var dataItems = event.clipboardData.items;
- for (var i = 0; i < dataItems.length; i++) {
- var item = dataItems[i];
- var kind = item.kind;
- var type = item.type;
- if (kind == "file" && type.match(/^image/)) {
- var reader = new FileReader();
- var imgFile = item.getAsFile();
- reader.onload = function() {
- var imgElement = '<img src="' + event.target.result + '">';
- $(setting.append).append(imgElement);
- afterPaste();
- $(setting.append).html("");
- };
- reader.readAsDataURL(imgFile);
- }
- }
- });
- }
- function afterPaste(){
- var imgBase64 = $("img",$(setting.append))[0].src;
- if(typeof(setting.afterPaste) == "function"){
- setting.afterPaste(imgBase64);
- }
- }
- function isIE11(){
- return window.navigator.userAgent.toLowerCase().indexOf("trident/7") >= 0;
- }
- function isFirefox(){
- return window.navigator.userAgent.toLowerCase().indexOf("firefox")>=0;
- }
- function isChrome(){
- return window.navigator.userAgent.toLowerCase().indexOf("chrome")>=0;
- }
- function isSupport(){
- return isIE11()||isFirefox()||isChrome();
- }
- function notify(){
- if(!isSupport() && unSupportPasteImgNotify){
- unSupportPasteImgNotify = false;
- $("#paste-img-notify").modal('show');
- }
- }
- }
- //该片段来自于http://www.codesnippet.cn/detail/1712201411305.html
来源: http://www.codesnippet.cn/detail/1712201411305.html