簡易上傳圖片外掛
阿新 • • 發佈：2019-01-02
效果預覽：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script> //圖片上傳預覽 IE是用了濾鏡。 function previewImage(file) { var MAXWIDTH = 90; var MAXHEIGHT = 90; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>'; var img = document.getElementById('imghead'); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; // img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else //相容IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead>'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ){ rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ){ param.width = maxWidth; param.height = Math.round(height / rateWidth); }else{ param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; } </script> </head> <body> <div id="addCommodityIndex"> <!--input-group start--> <div class="input-group row"> <div class="col-sm-3"> <label>商品圖片</label> </div> <div class="col-sm-9 big-photo"> <div id="preview"> <!-- <img id="imghead" border="0" src="img/photo_icon.png" width="90" height="90" onclick="$('#previewImg').click();"> --> <button id="imghead" style="text-align: center; width:72px;height:26px;" onclick="$('#previewImg').click();">上傳圖片</button> </div> <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg"> <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">--> </div> </div> <!--input-group end--> </div> </body> </html>
