type="file" 选择图片后预览
function setImagePreview(avalue) {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if(docObj.files &&docObj.files[]){
/*//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);*/
$("#localImag").html('<img id="preview" src='+window.URL.createObjectURL(docObj.files[])+' style="display: block; width: 192px; height: 144px;" />');
}
else
{
//IE下,使用滤镜
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "192px";
localImagId.style.height = "144px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
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;
}
type="file" 选择图片后预览的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- html选择图片后预览,保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- Input File选择图片后,未保存预览
今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...
- 巧用weui.gallery(),点击图片后预览图片
要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...
- input type=file 选择图片并且实现预览效果
通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...
- html input type=file 选择图片,图片预览 纯html js实现图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
随机推荐
- 安装 modelsim 10.4
安装教程: http://jingyan.baidu.com/article/da1091fb30d880027849d63a.html 在安装的过程中出现cmd乱(即在输入页面上停留字符),还有吱吱 ...
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】
之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下. 网页可见区域宽: document.body.clientWidth ...
- js 事件冒泡
一. 什么是事件的冒泡: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个程序,如果没有定义此事件处理程序或者事件返回true ...
- 第四篇T语言实例开发,自动加血
游戏自动加血 基础知识复习 通过前面的学习了解以下内容: TC软件的基本使用 TC的基础语法 变量与常量 功能的使用 流程语句的使用 线程的基本使用 TC控件的基本使用 热键和按钮的事件功能 控件的数 ...
- Java和C++的虚函数的异同
参考博客:点我 要点:Java中的普通函数默认为虚函数,因此动态绑定的行为是默认的,而C++必须将方法声明为虚函数(virtual关键字),执行时才会进行动态绑定,详细区别可参考代码以及注释. 代码大 ...
- 使用Ogre::ManualObject 绘制自定义图形
在ogre中如果需要进行自定义图形绘制可以使用ManualObject.例如绘制一个三角形的用法如下: SceneNode* pGridNode = m_pBaseNode->createChi ...
- 2016HUAS_ACM暑假集训3F - Jungle Roads
这个题目属于最小生成树问题,可以用Prim,也可以用Kruskal(还没试).题意简单直接,给你一个图,求出它最小生成树的权值. 题目最有趣的地方就是图的顶点是字母,稍微处理一下就好了. Sample ...
- LeetCode----Tree
Path Sum II 思路:回溯 public List<List<Integer>> pathSum(TreeNode root, int sum) { List<L ...
- 关于synchronized 影响可见性的问题
问题来自于学习thinking in java的时候的一个示例,先上代码吧 public class StopThread { private static boolean stop = false; ...
- Oracle索引失效问题:WHERE C1='' OR C2 IN(SubQuery),并发请求时出现大量latch: cache buffers chains等待
问题描述: 项目反馈某功能响应时间很长,高峰期时系统整体响应很慢... 获取相应的AWR,问题确实比较严重,latch: cache buffers chains等待,因为这些会话SQL执行时间太长, ...