图片上传实时预览效果
来源:互联网 发布:香港速成输入法 mac 编辑:程序博客网 时间:2024/06/14 12:43
一. 创建一个文件上传的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"); //img var imgObjPreview = document.getElementById("preview"); //div var 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;}
阅读全文
1 0
- 图片上传实时预览效果
- 上传图片,实时预览
- 图片上传预览效果
- 上传图片 预览效果
- 上传图片 预览效果
- 图片上传预览效果
- 上传图片实时预览缩略图
- JS图片上传实时预览
- 上传前实时图片预览
- 上传图片本地实时预览
- 图片上传时预览效果
- 上传图片时预览效果
- JavaScript 图片上传预览效果
- JavaScript 图片上传预览效果
- JavaScript 图片上传预览效果
- JavaScript 图片上传预览效果
- JavaScript 图片上传预览效果
- 上传图片时预览效果
- 函数Or功能
- NYOJ:40-公约数和公倍数
- (笔记)使用扩展的CI框架实现RESTful框架
- 单片机面试
- NYOJ:41-三个数从小到大排序
- 图片上传实时预览效果
- (bzoj 3688 折线统计)<DP>
- NYOJ:44-子串和
- 文件异步上传
- NYOJ:46-最少乘法次数
- 从高考到码农,毕业了
- Laravel安装配置
- NYOJ:48-小明的调查作业
- Android之cursorLoader进行数据异步加载