js实现图片上传并正常显示

项目经常会用到头像上传，那么怎么实现呢？
首先是HTML布局：

<label for="thumbnail" class="col-md-3 control-label">缩略图</label><div class="col-md-6"> <input type="file" class="form-control" id="thumbnail" name="thumbnail"></div>

jquery方式，IE不支持，但IE会获得绝对的上传路径信息：

function getObjectURL（file） { var url = null ; if （window.createObjectURL！=undefined） { // basicurl = window.createObjectURL（file） ; } else if （window.URL！=undefined） { // mozilla（firefox）url = window.URL.createObjectURL（file） ; } else if （window.webkitURL！=undefined） { // webkit or chromeurl = window.webkitURL.createObjectURL（file） ; } return url ;}$（"#thumbnail"）.change（function（） { var eImg = $（"<img />"）; eImg.attr（"src", getObjectURL（$（this）[0].files[0]））; // 或 this.files[0] this->input $（this）.after（eImg）;}）;

网上找一份可用的代码非常不易，经过不断的筛选总结才得出兼容所有的文件上传显示
HTML布局

<form action="" method="post" name="myform"> <input type="file" id="iptfileupload" onchange="show（）" value="" /> <img src="1.jpg" alt="" id="img" /></form>

JS代码：

<script type="text/javascript">function getPath（obj,fileQuery,transImg） { var imgSrc = "", imgArr = [], strSrc = "" ; if（window.navigator.userAgent.indexOf（"MSIE"）>=1）{ // IE浏览器判断if（obj.select）{ obj.select（）; var path=document.selection.createRange（）.text; alert（path） ; obj.removeAttribute（"src"）; imgSrc = fileQuery.value ; imgArr = imgSrc.split（"."） ; strSrc = imgArr[imgArr.length - 1].toLowerCase（） ; if（strSrc.localeCompare（"jpg"） === 0 || strSrc.localeCompare（"jpeg"） === 0 || strSrc.localeCompare（"gif"） === 0 || strSrc.localeCompare（"png"） === 0）{obj.setAttribute（"src",transImg）;obj.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader（src=""+path+"", sizingMethod="scale"）;"; // IE通过滤镜的方式实现图片显示 }else{//try{throw new Error（"File type Error！ please image file upload.."）; //}catch（e）{// alert（"name: " + e.name + "message: " + e.message） ;//} }}else{ // alert（fileQuery.value） ; imgSrc = fileQuery.value ; imgArr = imgSrc.split（"."） ; strSrc = imgArr[imgArr.length - 1].toLowerCase（） ; if（strSrc.localeCompare（"jpg"） === 0 || strSrc.localeCompare（"jpeg"） === 0 || strSrc.localeCompare（"gif"） === 0 || strSrc.localeCompare（"png"） === 0）{obj.src = fileQuery.value ; }else{//try{throw new Error（"File type Error！ please image file upload.."） ;//}catch（e）{// alert（"name: " + e.name + "message: " + e.message） ;//} }} } else{var file =fileQuery.files[0];var reader = new FileReader（）;reader.onload = function（e）{ imgSrc = fileQuery.value ; imgArr = imgSrc.split（"."） ; strSrc = imgArr[imgArr.length - 1].toLowerCase（） ; if（strSrc.localeCompare（"jpg"） === 0 || strSrc.localeCompare（"jpeg"） === 0 || strSrc.localeCompare（"gif"） === 0 || strSrc.localeCompare（"png"） === 0）{obj.setAttribute（"src", e.target.result） ; }else{//try{throw new Error（"File type Error！ please image file upload.."） ;//}catch（e）{// alert（"name: " + e.name + "message: " + e.message） ;//} } // alert（e.target.result）; }reader.readAsDataURL（file）; }}function show（）{ //以下即为完整客户端路径 var file_img=document.getElementById（"img"）,iptfileupload = document.getElementById（"iptfileupload"） ; getPath（file_img,iptfileupload,file_img） ;} </script>

希望本文所述对大家学习javascript程序设计有所帮助。