JavaScript上傳圖片及時預覽

?? /*******************************正面圖片上傳預覽開始****************************/
??????? function previewImage(file)?? //img便簽調用該函數 οnchange="previewImage(this),onchange 事件會在域的內容改變時發生。
??????? {
????????? var MAXWIDTH? = 100;?? //寬度
????????? var MAXHEIGHT = 100;?? //高度
????????? var div = document.getElementById('preview');?? //獲取div控件id為preview的元素 同jQuery “var div=$("#preview");”
????????? if (file.files && file.files[0])
????????? {
????????????? //div.innerHTML ='<img id=imghead1>';//innerHTML:重新設置div內的html代碼
????????????? var img = document.getElementById('imghead1');?? //獲取img控件id為imghead1的元素 同jQuery “var div=$("#imghead1");”
????????????? img.onload = function(){ //img控件點擊事件，同于控件調用非匿名函數
????????????? //裁剪圖片尺寸
?????????? var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); //img.offsetWidth、img.offsetHeight img控件的高度和寬度
??????????????? 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;}//獲取到成功讀取的文件內容，并以插入一個img節點的方式顯示選中的圖片。
????????????? 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=imghead1>';
??????????? var img = document.getElementById('imghead1');
??????????? 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;
??????? }
??????? /*******************************正面圖片上傳預覽結束****************************/

源碼云盤地址：? http://pan.baidu.com/s/1nuPx1xf??? 提取碼： bnyg

?

? <div class="pic" id="preview"? >
?????????????????? <img class="sfimg" runat="server" id="imghead1" src="" />
?????????????????? <input type="hidden" runat="server" id="pictruePet" value="0" />
?????????????????? </div>

posted on 2016-05-06 13:26 "茶樹" 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/LOVEJIEYING/p/5465291.html

總結

以上是生活随笔為你收集整理的JavaScript上传图片及时预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。