首页 > 代码库 > 浏览器 本地预览图片 window.url.createobjecturl

浏览器 本地预览图片 window.url.createobjecturl

2024-09-09 23:06:49   217人阅读

第一种方式
  1. <script type="text/javascript">   
  2. function setImagePreview() {   
  3. var docObj = document.getElementById("ctl00_ContentMain_file_head");   
  4. var fileName = docObj.value;   
  5. if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
  6. alert(‘您上传的图片格式不正确，请重新选择！‘);   
  7. return false;   
  8. }   
  9.   
  10. var imgObjPreview = document.getElementById("preview");   
  11. if (docObj.files && docObj.files[0]) {   
  12. //火狐下，直接设img属性   
  13. imgObjPreview.style.display = ‘block‘;   
  14. imgObjPreview.style.width = ‘63px‘;   
  15. imgObjPreview.style.height = ‘63px‘;   
  16. //imgObjPreview.src = http://www.mamicode.com/docObj.files[0].getAsDataURL();   
  17. if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {   
  18. imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);   
  19. }   
  20. else {   
  21. imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);   
  22. }   
  23. } else {   
  24. //IE下，使用滤镜   
  25. docObj.select();   
  26. docObj.blur();   
  27. var imgSrc = document.selection.createRange().text;   
  28. var localImagId = document.getElementById("localImag");   
  29. //必须设置初始大小   
  30. localImagId.style.width = "63px";   
  31. localImagId.style.height = "63px";   
  32. //图片异常的捕捉，防止用户修改后缀来伪造图片   
  33. try {   
  34. localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";   
  35. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;   
  36. } catch (e) {   
  37. alert("您上传的图片格式不正确，请重新选择！");   
  38. return false;   
  39. }   
  40. imgObjPreview.style.display = ‘none‘;   
  41. document.selection.empty();   
  42. }   
  43. return true;   
  44. }   
  45.   
  46. </script>


<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> 
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" /> 


第二种方式


  1. function setImagePreview(a,b) {
  2.     var url =‘‘;
  3.     if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
  4.         url = document.getElementById(a).value;
  5.     } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
  6.         url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
  7.     } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
  8.         url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
  9.     }
  10.     var imgPre = document.getElementById(b);
  11.     imgPre.src = url;
  12. }

a = fileid
b=imgid



浏览器 本地预览图片 window.url.createobjecturl


联系
我们