Home  >  Article  >  Web Front-end  >  js implements image uploading and normal display_javascript skills

js implements image uploading and normal display_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:24:331515browse

Projects often use avatar uploading, so how to implement it?

First is the HTML layout:

<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 method is not supported by IE, but IE will obtain the absolute upload path information:

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);});

It is not easy to find a usable code online. After constant screening and summarization, we found that it is compatible with all file upload displays
HTML layout

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

JS code:

<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>

I hope this article will be helpful to everyone in learning javascript programming.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn