js implémente le téléchargement d'images et les compétences normales display_javascript

Les projets utilisent souvent le téléchargement d'avatars, alors comment le mettre en œuvre ?

Le premier est la mise en page 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>

La méthode jquery n'est pas prise en charge par IE, mais IE obtiendra les informations absolues sur le chemin de téléchargement :

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

Il n'est pas facile de trouver un code utilisable en ligne. Après une vérification et une synthèse constantes, nous avons constaté qu'il est compatible avec tous les affichages de téléchargement de fichiers
Mise en page HTML

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

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

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.