js 上传图片

来源:互联网 发布:电源监控软件 编辑:程序博客网 时间:2024/06/05 08:27
  1. <html>  
  2. <head>  
  3. <title>js图片上传预览</title>  
  4. <script>  
  5. function PreviewImage(imgFile)  
  6. {  
  7.     var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);  
  8.     filextension=filextension.toLowerCase();  
  9.     if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))  
  10.     {  
  11.         alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");  
  12.         imgFile.focus();  
  13.     }  
  14.     else  
  15.     {  
  16.         var path;  
  17.         if(document.all)//IE  
  18.         {  
  19.             imgFile.select();  
  20.             path = document.selection.createRange().text;  
  21.             document.getElementById("imgPreview").innerHTML="";  
  22.             document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果        
  23.         }  
  24.         else//FF  
  25.         {  
  26.             path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上  
  27.             //path = imgFile.files[0].getAsDataURL();// FF 3.0  
  28.             document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";  
  29.             //document.getElementById("img1").src = path;  
  30.         }  
  31.     }  
  32. }  
  33. </script>  
  34. </head>  
  35. <body>  
  36. <input type="file" onchange='PreviewImage(this)' />  
  37. <br />  
  38. <div id="imgPreview" style='width:120px; height:100px;'>  
  39.     <img id="img1" src="" width="120" height="100" />  
  40. </div>  
  41. </body>  
  42. </html> 
0 0
原创粉丝点击