关于移动端调用手机相册以及上传图片的一些小功能

话不多说

下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,QQ浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。

  1.   
  2.   
  3.   
  4.     上传图片  
  5.       
  6.   
  7.   
  8.       
  9.       
  10.   
  11.         
      
  12.             
      
  13.                   
  14.             
  
  •             
      
  •                   
  •                       
  •                 
  •   
  •             
  •   
  •         
  •   
  •       
  •       
  •           
  •               
  •         
  •   
  •     
  •   
  •           
  •   
  •       
  •         function setImagePreview() {  
  •             var preview, img_txt, localImag, file_head = document.getElementById("file_head"),  
  •             picture = file_head.value;  
  •             if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"),  
  •             !1;  
  •             if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",  
  •                 preview.style.width = "63px",  
  •                 preview.style.height = "63px",  
  •                 preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);  
  •             else {  
  •                 file_head.select(),  
  •                 file_head.blur(),  
  •                 img_txt = document.selection.createRange().text,  
  •                 localImag = document.getElementById("localImag"),  
  •                 localImag.style.width = "63px",  
  •                 localImag.style.height = "63px";  
  •                 try {  
  •                     localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",  
  •                     localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt  
  •                 } catch(f) {  
  •                     return alert("您上传的图片格式不正确,请重新选择!"),  
  •                     !1  
  •                 }  
  •                 preview.style.display = "none",  
  •                 document.selection.empty()  
  •             }  
  •             return document.getElementById("DivUp").style.display = "block",  
  •             !0  
  •         }  
  •       
  •   
  •  
  • 不同浏览器的效果不一样,大家可以一一去试。

    你可能感兴趣的:(关于移动端调用手机相册以及上传图片的一些小功能)