正文 

当前位置： 首页 > java > java教程

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

立心 立心     2022-08-25     614

关键词：

第一种方式
  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 = 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



jquery图片上传前先在本地预览（不经过后端处理）

...反而是C:fakepatha.jpg，这个路径是错误的。百度之后得到说浏览器基于保护用户的相关安全措施，隐藏了上传的真实路径，用fakepath代替，当然，调整浏览器的相关安全设置可以解决这个 查看详情

3种上传图片并实现预览的方法

...方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。以下 查看详情

jquery实现图片预览

...11月26日*介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE谷歌火狐)不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明:Im 查看详情

javascript图片的上传前预览（兼容所有浏览器）

...sp;实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。 实现要点 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。● 对于 IE6~9  查看详情

图片上传组件开发(代码片段)

...。预览图片用户使用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自己定义图片预览区域的大小，并限定所传图片的... 查看详情

javascript实现本地图片上传预览功能（兼容iechromeff）(代码片段)

...的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。关键词：imgAreaSelectFileReaderd... 查看详情

图片上传组件开发(代码片段)

...预览用户使用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自己定义图片预览区域的大小，并限定所传图片的... 查看详情

本地上传图片预览

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>图片上传本地预览，获得图片的base64(可压缩)</title><styletype="text/css">.uplo 查看详情

javascript预览本地图片

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content="buexplain"><metaname="Keywords"co 查看详情

uniapp上传图片至服务器，获得在线图片链接预览（实战）

...图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。首先我们看一下uniapp的官方文档：https://uniapp.dcloud.io/api/media/image?id=chooseimage大概是这... 查看详情

html5上传本地图片,在线预览及裁剪(filereader,canvas)

...览一下，使用filereader方法无需和后台交互，代码如下：//本地图片在上传之前的预览效果//图片上传预览functionpreviewImage(file){if(file.files&&file.files[0]){varimg=document.getElementById(‘imghead‘);varreader=newFi 查看详情

浅谈js本地图片预览

　　最近在工作中遇到一个问题，就是实现一个反馈页面，这个反馈页面的元素有反馈主题、反馈类型、反馈内容、反馈人联系电话以及反馈图片。前端将这些反馈的元素POST给后台提供的接口；实现这个工作的步骤就是：页面... 查看详情

图片本地上传预览

在IE里面显示的话，你可以用div直接显示图片，不通过img来添加SRC，这样就不会有小图标出现例子：<divclass="banner_up_pic"id="imgPreDiv"></div>varfile_upl=document.getElementById("file"); file_upl.select(); 获取图片路径 varim 查看详情

js上传图片本地预览缓存

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title><scriptsrc="jQuery.js"></script><styletype="text/css">#file{display:block;width: 查看详情

图片上传预览

例1：1.先创建一个file表单域，我们需要用它来浏览本地文件。<formname="form1"id="form1"method="post"action="upload.php"><inputtype="file"name="file1"id="file1"/></form>2.试下效果：　判断文件类型：当用户选择了一个图片文件时，希望他... 查看详情

使用input选择本地图片，并且实现预览功能(代码片段)

1、使用input标签选择本地图片文件用一个盒子来存放预览的图片 2、JS实现预览 首先添加一个inputchange事件，再用到 URL.createObjectURL()方法 用来创建URL的 File 对象或者 Blob 对象? 这时候就能可以选... 查看详情

网站传到服务器后有些图片打不开是啥原因？在本地预览的时候全部可以打开，我的网址www.xhpackage.com

参考技术A我这能打开，应该是用浏览器的问题，ctrl+f5刷新应该就没问题了 查看详情

本地多个图片上传预览，删除

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="js/jquery-2.1.4.min.js"type="text/javascript"charset="utf-8"></s 查看详情