[前端] 上传图片并显示

项目经常会用到头像上传，那么怎么实现呢？

首先是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) { // basic  url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)  url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome  url = 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;
                   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{  throw new Error('File type Error! please image file upload..');    }
               }else{  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{  throw new Error('File type Error! please image file upload..') ;  }

               }

           } 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{  throw new Error('File type Error! please image file upload..') ;  }  }
               reader.readAsDataURL(file);
           }
       }

       function show(){
           //以下即为完整客户端路径  var file_img=document.getElementById("img"),
               iptfileupload = document.getElementById('iptfileupload') ;
           getPath(file_img,iptfileupload,file_img) ;
       }
   </script>

stringObject.localeCompare(target) 用本地特定的顺序比较两字符串

小于target 返回小于0的数

等于target返回0

大于target返回大于0的数

fileReader H5出来的新对象

DEMO下载 http://pan.baidu.com/s/1bn4kfX9

关注我，关注我的博客，提出您的要求，我会写的越来越好！