<!doctype html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="Generator" content="EditPlus?">

 <meta name="Author" content="">

 <meta name="Keywords" content="">

 <meta name="Description" content="">

 <title>Document</title>

 </head>

 <body>

 <script>

function setImagePreview() {

    var docObj = document.getElementById("doc");

    var imgObjPreview = document.getElementById("preview");

    if (docObj.files && docObj.files[0]) {

    /*火狐下，直接设img属性*/

imgObjPreview.style.display = 'block';

    imgObjPreview.style.width = '150px';

    imgObjPreview.style.height = '120px';

    /*imgObjPreview.src = docObj.files[0].getAsDataURL();*/

    /*火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式*/

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

    } else {

    /*IE下，使用滤镜*/

docObj.select();

    var imgSrc = document.selection.createRange().text;

    var localImagId = document.getElementById("localImag");

    /*必须设置初始大小*/

localImagId.style.width = "150px";

    localImagId.style.height = "120px";

    /*图片异常的捕捉，防止用户修改后缀来伪造图片*/

try {

    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

    } catch (e) {

    alert("您上传的图片格式不正确，请重新选择!");

return false;

    }

    imgObjPreview.style.display = 'none';

    document.selection.empty();

    }

    return true;

}

</script>

<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">

<p>

<div id="localImag">

<img id="preview" width=-1 height=-1 style="diplay: none" />

</div>

</p>

 </body>

</html>

javscript上传图片前预览的方法setPreViewImage()的更多相关文章

  1. uploadPreview 上传图片前预览 IE9 索引无效的问题

    最近公司的项目用到比较多的上传图片的操作,所以用到了基于jquery的上传前预览的插件 uploadPreview ,后来测试的时候发现在IE9下报索引无效的问题. 异常的产生方式 放一个file控件 ...

  2. js上传图片前预览方法（支持预览多个图片）

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  3. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  4. moviepy音视频剪辑：输出文件前预览剪辑和视频帧的preview和imdisplay方法

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 由于moviepy合成剪辑后,输出需要较多的时间,那么在输出前预览一下有助于提高处理效率.moviepy提供了预览的工具,这个工具是基于pygame ...

  5. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  6. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

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

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

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

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  9. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

随机推荐

  1. C# in Depth阅读笔记1：C#1特性

    1.委托 委托是对包含返回值和参数的行为的一种封装,类似于单一方法的接口. 委托是不易变的(就像string),system.delegate下的combine和remove方法都只能产生一个新的委托 ...

  2. 在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作

    -(void)viewDidLayoutSubviews { if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)] ...

  3. css selection改变文字反选的背景颜色

    <style type="text/css"><!--.ai::-moz-selection { background:#cc0000; color:#fff; ...

  4. ASP .Net Core 使用 Dapper 轻型ORM框架

    一:优势 1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编译后就40K的一个很小的Dll. 2,Dapper很快.Dapper的速度接近与IDataReader,取列表 ...

  5. JavaScript计算加减乘除

    //加法函数 function jiafa(a,b){ var a=parseInt(document.getElementById("number1").value); //pa ...

  6. 算法_php猴子选大王_约瑟夫问题

    题目: n个猴子围坐一圈,从第一个猴子开始数,到第m个出列,求最后一个猴子的编号. 分析: 首先想到循环,然后队列,然后堆,所以用数组模拟一个循环的列表,下标为[0-(n-1)],下标+1整除m干掉元 ...

  7. AJAX远程跨域获取数据

    //本地获取json文件 $.ajax({ url : 'json.php', type : 'post', dataType : 'json',//返回json数据格式 success : func ...

  8. Javascript 之内置对象

    JS提供了11种引用类型:Object.Array.Date.Function.Error.RegExp.Math.Number.String.Boolean.Globle.其中包括了三种基本包装类型 ...

  9. 常用在线工具及API网址总结

    1.小图标在线查找 https://www.iconfinder.com/ 2.在线做图,Flowchart流程图,BPMN图,Org组织结构图等 http://www.processon.com/ ...

  10. to_date如何处理毫秒？

    http://blog.csdn.net/jamex/archive/2008/09/08/2899172.aspx to_date如何处理毫秒? 如把"1970-01-01 00:00:0 ...