正文

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

一望无际tiger  2022-02-08  289

关键词：

功能描述

通过 JavaScript 实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。

实现要点

● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。

● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。

 <!DOCTYPE html>  
 <html>  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<style type="text/css">  
 #preview, .img, img  
 {  
 width:200px;  
 height:200px;  
 }  
 #preview  
 {  
border:1px solid #000;  
}  
 </style>  
 </head>  
<body>  
 <div id="preview"></div>  
<input type="file" onchange="preview(this)" />  
 <script type="text/javascript">    
 function preview(file)  
 {  
 var prevDiv = document.getElementById(‘preview‘);  
 if (file.files && file.files[0])  
 {  
 var reader = new FileReader();  
 reader.onload = function(evt){  
 prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;  
}    
 reader.readAsDataURL(file.files[0]);  
}  
 else    
 {  
 prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=‘‘ + file.value + ‘‘"></div>‘;  
 }  
 }  
 </script>  
 </body>  
 </html>

前端图片预览，上传前预览，兼容ie7891011，firefox，chrome

在现在的Web开发中不可避免的会做一个图片预览的功能，比如在上传图片的情况下，一个很简单的办法就是讲图片上传至服务器之后，再将文件的URL返回回来，然后异步通过这个URL加载刚刚上传的图片，实现图片的预览，很明显... 查看详情

javascript上传前的javascript图片预览(代码片段)

查看详情

上传前多张图片预览

...码就可以正常工作。我想预览用户上传的内容。这是我的javascript：varabc=0;//Declaringanddefiningglobalincreementvariable$(document).ready(fun 查看详情

js兼容各个浏览器的本地图片上传即时预览效果

...面的的问题，所以也就做了个简单的demo来实现本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码之前... 查看详情

ie浏览器上传图片预览兼容（ie7891011）

$("#file_upload").change(function(){var$file=$(this);varfileObj=$file[0];varwindowURL=window.URL||window.webkitURL;vardataURL;var$img=$("#preview");if(fileObj&&fileObj.files&&fileObj.f 查看详情

前端图片上传前预览

<!DOCTYPEhtml><html><head><title>图片上传预览</title><metacharset="utf-8"><scripttype="text/javascript"src="jquery-1.8.3.min.js"></script><scripttype="text 查看详情

图片上传前的预览（php）

...;/form>2.试下效果：　判断文件类型：当用户选择了一个图片文件时，希望他能马上看到这张图片的缩略图查看详情

html5jquery图片上传前预览

HTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images，本例子主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持H... 查看详情

Rails 3：上传前预览图像的最佳方式

】Rails3：上传前预览图像的最佳方式【英文标题】：Rails3:bestwaytopreviewimagebeforeupload【发布时间】：2013-08-1321:39:51【问题描述】：我需要在提交表单之前预览图像。我使用Rails3，需要与浏览器兼容的东西。有什么想法可以实现吗... 查看详情

原生js上传加预览兼容ie

前提条件：ie浏览器模式下，用户要允许ie默认的加载项；以下兼容ie的方法才会生效***********************************************************************/*图片上传预览IE是用了滤镜*/functionpreviewImage(file){varMAXWIDTH=60;varMAXHEIGHT=60;vardiv=docume 查看详情

javascript中的filereader对象（实现上传图片预览）

1、FileReader对象简介1.检测浏览器对FileReader的支持 if(window.FileReader){ varfr=newFileReader(); //addyourcodehere } else{ alert("Notsupportedbyyou 查看详情

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

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图... 查看详情

以角度 5 上传前的图像预览

】以角度5上传前的图像预览【英文标题】：Imagepreviewbeforeuploadinangular5【发布时间】：2018-11-0202:45:59【问题描述】：我有这段代码在上传之前显示图像预览。但是我正在使用Angular5，所以我有一个.ts文件而不是.js文件。我怎样才... 查看详情

javascript上传前预览图像(代码片段)

查看详情

javascript实现简单的前端上传图片预览

JavaScript实现简单的前端上传图片预览<divclass="file_upload"><divid="portrait"></div><inputtype="file"name=""id=""onchange="showPerview(this)"></div><scripttype="text/javascript"> 查看详情

基于layui的图片上传前预览功能的2种实现方式(代码片段)

...的功能：选择文件后---点击文件名，页面中间弹窗内预览图片，先看效果图：预览功能的实现具体有2种方式：第一种是用blob+FileReader，第二种是layUI自带的。1.用layUI自带的参数实现图片预览：layui.use(‘upload‘,function()...choose:func... 查看详情

带预览和删除、Jquery 和 Javascript 的多张图片上传

】带预览和删除、Jquery和Javascript的多张图片上传【英文标题】：MultipleImageuploadwithpreviwanddelete,JqueryandJavascript【发布时间】：2020-09-2707:24:24【问题描述】：我这里有问题。我使用此代码多次选择和预览图像，但我需要删除选定的... 查看详情

Javascript:: 图像预览

】Javascript::图像预览【英文标题】：Javascript::Imagepreviews【发布时间】：2020-05-0123:00:21【问题描述】：我想在上传到我的laravel应用程序之前预览4张图片。当我上传第一张图片时，我可以看到第一张预览图像。但如果我上传第二张... 查看详情