前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome

在现在的Web开发中不可避免的会做一个图片预览的功能，

比如在上传图片的情况下，一个很简单的办法就是讲图片上传至服务器之后，再将文件的URL返回回来，然后异步通过这个URL加载刚刚上传的图片，实现图片的预览，

很明显的在这个过程中两次Web请求，一次发送文件，一次下载文件，到最后这个文件如果在客户端被删除（取消上传，弃用这次的上传），

这整个过程都白费了。我们希望能够在图片上传之前就能进行图片的预览，这样就避免了不必要的网络请求和时间等待。

在IE中有如下方式

var url;

var fileobj = document.getElementById(sourceId);

fileobj.select();

url = document.selection.createRange().text;

或者

var url = document.getElementById(sourceId).value;

两种方式获取到的路径直接给img src 可以进行本地图片的预览（可以加上file:///协议，效果一样），这两种方式对IE7、8、9、10、11下有效。

在Firefox和Chrome中使用如下方式:

var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

将得到的值给img src 进行图片预览。可能还会看到如下的方式：var url = obj.files.item(0).getAsDataURL();
这种使用Firefox File对象的getAsDataURL的方式，已经在Firefox 7.0以后弃用，Firefox DOM File，可能原因是在HTML5标准中有相关的定义。

链接

时间： 2024-10-12 09:07:53

前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome的相关文章

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

[转]html之file标签 --- 图片上传前预览 -- FileReader

【转】HTML5 jQuery图片上传前预览

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta h

input file实现多选，限制文件上传类型，图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform

【转】文件上传前预览

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

H5上传前预览视频（结合 video标签 &&h5 fileApi）

2017/09/14 发布 js代码: // hTML5实现表单内的上传文件框,上传前预览视频,刷新预览video,使用HTML5 的File API, // 建立一个可存取到该file的url,一个空的video标签,ID为video0,把选择的文件显示在video标签中,实现视频预览功能. // 需要选择支持HTML API的浏览器. $("#video").change(function(){ var objUrl = getObjectURL(this.files[0]) ;

HTML5 FileReader实现图片上传前预览

如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下:

图片上传前预览的功能

最近自己想做一个项目,涉及到很多图片上传和预览的功能,所以简单记录下: 这里我没有用vue的组件库,是单纯靠input来写出一个图片上传的功能. 思路是:先用input[type=file]来获取本地的图片,然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url,把这个url赋值到用于预览的src就好了. <div class="upload"> <div class="img-container"&g

前端图片上传前预览

<!DOCTYPE html> <html> <head> <title>图片上传预览</title> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascri