[前端] 上传图片并显示

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

 

首先是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

欢迎关注技术开发分享录：http://fenxianglu.cn/