一篇文章搞定form表單中上傳圖片控件使用技巧

現功能介紹：在使用form表單上傳圖片時，將上傳圖片縮略圖顯示在上傳圖片控件內的方法

HTML區：

<div class="form-group">
      <label for="avatar">頭像<img class="avatar" width="80px" height="80px"
       src="{% static 'image/head/default.png' %}"
                 alt="圖片未加載出"></label>
       <input type="file" id="avatar" style="display: none">
</div>


JS代碼區

<script>
    {#替換頭像位置圖片方法#}
    $('#avatar').change(function () {
            {#jquery對象轉換為DOM對象#}
            var choose_file=$(this)[0].files[0];
            {#創建一個閱讀器對象#}
            var reader=new FileReader();
            {#讀取choose_file的文件對象#}
            reader.readAsDataURL(choose_file);
            {#上面代碼加載完再運行函數內代碼（原因：圖片未加載完下面的代碼就有可能執行完了）#}
            reader.onload=function () {
                {# 路徑的值在reader.result中#}
                $('.avatar').attr("src", reader.result)
            }
        }
    )
</script>

PS:注意務必要引入jQuery樣式

最終結果顯示

#python##Python入門推薦#

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Firefox3,IE6,IE7,IE8上傳圖片預覽</title> 
<style type="text/css"><!-- 
 
#preview_wrapper{ 
 display:inline-block; 
 width:300px; 
 height:300px; 
 background-color:#CCC; 
} 
#preview_fake{ 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
#preview_size_fake{ 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
 visibility:hidden; 
} 
#preview{ 
 width:300px; 
 height:300px; 
} 
--></style><style type="text/css" mce_bogus="1"> 
#preview_wrapper{ 
 display:inline-block; 
 width:300px; 
 height:300px; 
 background-color:#CCC; 
} 
#preview_fake{ 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
#preview_size_fake{ 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
 visibility:hidden; 
} 
#preview{ 
 width:300px; 
 height:300px; 
} </style> 
 
<script type="text/javascript"><!-- 
 
function onUploadImgChange(sender){ 
 if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ 
 alert('圖片格式無效！'); 
 return false; 
 } 
 
 var objPreview=document.getElementByIdx( 'preview' ); 
 var objPreviewFake=document.getElementByIdx( 'preview_fake' ); 
 var objPreviewSizeFake=document.getElementByIdx( 'preview_size_fake' ); 
 
 if( sender.files && sender.files[0] ){ 
 objPreview.style.display='block'; 
 objPreview.style.width='auto'; 
 objPreview.style.height='auto'; 
 
 // Firefox 3　請使用此代碼 
 //objPreview.src=sender.files[0].getAsDataURL();
 //firefox 8 請使用此代碼
 // objPreview.src=window.URL.createObjectURL(sender.files[0]); 
 //chrome 請使用此代碼 
 //objPreview.src=window.webkitURL.createObjectURL(sender.files[0]); 
 if (sender.files[0].getAsDataURL) objPreview.src=sender.files[0].getAsDataURL();
 if (window.URL.createObjectURL) objPreview.src=window.URL.createObjectURL(sender.files[0]);
 if (window.webkitURL.createObjectURL) objPreview.src=window.webkitURL.createObjectURL(sender.files[0]);
 if (window.createObjectURL) objPreview.src=window.createObjectURL(sender.files[0]);
 //實例化file reader對象
// var img=new Image();
// var reader=new FileReader();
// reader.onload=function (e) {
// img.src=this.result; // e.target.result
// // oDragWrap.appendChild(img);
// }
// reader.readAsDataURL(sender.files[0]);
 }else if( objPreviewFake.filters ){ 
 // IE7,IE8 在設置本地圖片地址為 img.src 時出現莫名其妙的后果 
 //（相同環境有時能顯示，有時不顯示），因此只能用濾鏡來解決 
 sender.select(); 
 var imgSrc=document.selection.createRange().text; 
 
 objPreviewFake.filters.item( 
 'DXImageTransform.Microsoft.AlphaImageLoader').src=imgSrc; 
 objPreviewSizeFake.filters.item( 
 'DXImageTransform.Microsoft.AlphaImageLoader').src=imgSrc; 
 
 autoSizePreview( objPreviewFake, 
 objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); 
 objPreview.style.display='none';
 }
 //sender.blur(); 
} 
 
function onPreviewLoad(sender){ 
 autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); 
} 
 
function autoSizePreview( objPre, originalWidth, originalHeight ){ 
 var zoomParam=clacImgZoomParam( 300, 300, originalWidth, originalHeight ); 
 objPre.style.width=zoomParam.width + 'px'; 
 objPre.style.height=zoomParam.height + 'px'; 
 objPre.style.marginTop=zoomParam.top + 'px'; 
 objPre.style.marginLeft=zoomParam.left + 'px'; 
} 
 
function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 
 var param={ width:width, height:height, top:0, left:0 }; 
 
 if( width>maxWidth || height>maxHeight ){ 
 rateWidth=width / maxWidth; 
 rateHeight=height / maxHeight; 
 
 if( rateWidth > rateHeight ){ 
 param.width=maxWidth; 
 param.height=height / rateWidth; 
 }else{ 
 param.width=width / rateHeight; 
 param.height=maxHeight; 
 } 
 } 
 
 param.left=(maxWidth - param.width) / 2; 
 param.top=(maxHeight - param.height) / 2; 
 
 return param; 
} 
// --></script> 
 
</head> 
 
<body> 
 <div id="preview_wrapper"> 
 <div id="preview_fake"> 
 <img id="preview" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" onload="onPreviewLoad(this)"/> 
 </div> 
 </div> 
 <br/> 
 <input id="upload_img" type="file" onchange="onUploadImgChange(this)"/> 
 <br/> 
 <img id="preview_size_fake"/> 
</body> 
</html>

--說明：chrome瀏覽器對window.webkitURL.createObjectURL的支持出現的了一些問題，未找到替代方法，希望有些找到后能通知我~~

在線咨詢

上一篇：前端開發教程之CSS（四）
下一篇：JS從看懂到看開（前端面試題整合）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一篇文章搞定form表單中上傳圖片控件使用技巧

現功能介紹：在使用form表單上傳圖片時，將上傳圖片縮略圖顯示在上傳圖片控件內的方法

最終結果顯示

您的項目需求