javascript 图片上传预览-兼容标准

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片上传预览</title>
<script language="javascript" type="text/javascript">
function $(obj){
    return document.getElementById(obj);
}
window.onload = function(){
    $("file1").onchange = function(){
        this.select();
        $("img1").src = "file:///"+document.selection.createRange().text;
    }
}
</script>
</head>

<body>
<form name="form1">
    <input type="file" name="file1" id="file1" />
</form>
<img src="#" id="img1" />
</body>
</html>

保存到本地.htm格式，即可

赞 (0)

相关推荐

  • js图片上传前预览功能（兼容所有浏览器）

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

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • 图片上传之前检查大小、尺寸、格式并预览的js代码

    下面的代码,需要保存到本地种执行,在线看不到实际效果. validate before upload by Lance Zhang File type :gif,jpg,jpeg,png,bmp File Size limit: K Image Height Limit: Image Width Limit: Image Preview function CheckFileSize() { var limit = document.getElementById("fileSizeLimit&qu

  • JS实现图片上传预览功能

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body&g

  • 兼容IE和FF的图片上传前预览js代码

    兼容IE和FF的图片上传前预览js代码

    效果图如下:  代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta

  • javascript 图片上传预览-兼容标准

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后

  • 模拟QQ心情图片上传预览示例

    模拟QQ心情图片上传预览示例

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以下插件,在别的图片上传功能说不定各位能用的上. 1.jQuery File Upload Demo地址:http://blueimp.github.io/jQuery-File-Upload/ 优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制: 缺点是在IE9等一些浏览器

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • js前端实现多图图片上传预览的两个方法(推荐)

    一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

  • 基于JQuery实现图片上传预览与删除操作

    本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;

  • Angularjs实现多图片上传预览功能

    Angularjs实现多图片上传预览功能

    最近要实现一个多图片上传的预览功能,网上有很多例子大多不太完整,我就把他们的整合了下并且加了一些功能和界面,我们只需要调用一条指令就可以实现,但传给后台还需要额外的代码,会在后面controller里介绍.不知道封装的是否符合标准,还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家. 图片上传的预览,我们最主要解决的是拿到input的on-change事件,再是读取图片,读取图片我们需要用到FileReader. 我们先写一个读取图片的服务,这是网上的一位大佬写的,

  • jQuery实现图片上传预览效果功能完整实例【测试可用】

    jQuery实现图片上传预览效果功能完整实例【测试可用】

    本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j

  • ie8本地图片上传预览示例代码

    复制代码 代码如下: imgpath= getRealPath(fileId): document.getElementById("divSBTP").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果 func

随机推荐