一篇文章搞定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表单上传图片时，将上传图片缩略图显示在上传图片控件内的方法

最终结果显示

您的项目需求