图片上传实时预览效果

一. 创建一个文件上传的input框 id为doc

/这是图片上传的input框
<input type='file' id='doc' name='pic' style='width:60px;margin-left:20px;'>

二. 在该input框后面创建一个div里面嵌套img标签 div id为localImag img标签的id为preview

//这是要展示上传图片的div以及img标签
<div style="width:100px;height:100px;float:right;" id="localImag"><img src="" id="preview" alt=""></div>

三. 在js里面写,绑定input的默认值发生改变即选中文件的事件并获取到值调用函数将值作为实参传进去

//绑定更换头像实现预览的效果$("input[name='pic']").live('change',function(){var file = $(this).val();setImagePreview(file);});

四. 复制下面的代码也是在js里面

//实现实时预览的函数function setImagePreview(avalue) {var docObj = document.getElementById("doc");//imgvar imgObjPreview = document.getElementById("preview");//divvar divs = document.getElementById("localImag");if (docObj.files && docObj.files[0]) {//火狐下，直接设img属性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '100px';imgObjPreview.style.height = '100px';//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 = "100px";localImagId.style.height = "100px";//图片异常的捕捉，防止用户修改后缀来伪造图片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;
}

图片上传实时预览效果相关推荐

php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
android 图片预览动画,Android图片上传实现预览效果
首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简 ...
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
图片上传本地预览(回显)插件
图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...

图片上传实时预览效果

一. 创建一个文件上传的input框 id为doc

二. 在该input框后面创建一个div里面嵌套img标签 div id为localImag img标签的id为preview

三. 在js里面写,绑定input的默认值发生改变即选中文件的事件并获取到值调用函数将值作为实参传进去

四. 复制下面的代码也是在js里面

图片上传实时预览效果相关推荐

最新文章

热门文章

图片上传实时预览效果

一. 创建一个文件上传的input框 id为doc

二. 在该input框后面创建一个div里面嵌套img标签 div id为localImag img标签的id为preview

三. 在js里面写,绑定input的默认值发生改变即选中文件的事件并获取到值 调用函数将值作为实参传进去

四. 复制下面的代码 也是在js里面

图片上传实时预览效果相关推荐

最新文章

热门文章

三. 在js里面写,绑定input的默认值发生改变即选中文件的事件并获取到值调用函数将值作为实参传进去

四. 复制下面的代码也是在js里面