图片上传前预览实现
2014-02-28 17:27
155 查看
项目中用到图片上传前预览功能,在网上找了一些资料,终于实现了
现在记录下来供以后参考使用
此功能基于js代码,不需要引入任何js代码,操作步骤如下:
1、页面添加 html代码
//文件选择框
2、添加js代码
经过上面两部操作就可以实现图片上传前预览功能。
实际使用截图:
现在记录下来供以后参考使用
此功能基于js代码,不需要引入任何js代码,操作步骤如下:
1、页面添加 html代码
//文件选择框
<input type="file" name="imgFile" id="imgFile" accept="image/*" style="width:210px;height: 21px"/>
<div id="previewImgDiv" > <div id="localImg"><img id="preview" width="128px" height="128px"/></div> </div>
<!--iframe中需要用到这个--> <div id="picDiv" style="width: 1px; height: 1px;"></div>
2、添加js代码
function setImagePreview() { var docObj=document.getElementById("imgFile"); var imgObjPreview=document.getElementById("preview"); if(docObj.files &&docObj.files[0]) { //火狐下,直接设img属性 //imgObjPreview.style.display = 'block'; //imgObjPreview.style.width = '250px'; //imgObjPreview.style.height = '350px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下,使用滤镜 docObj.select(); //可以解决IE9下document.selection.createRange().text无法获取图片路径失效的问题解决 --不可少 可提高兼容性 但是在iframe下无效 //docObj.blur(); //任意元素 div 或者button可以获取焦点的元素 可以解决IE9和iframe下document.selection.createRange().text无法获取图片路径失效的问题解决 document.getElementById("#picDiv").focus(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("localImg"); //必须设置初始大小 localImagId.style.width = "128px"; localImagId.style.height = "128px"; //图片异常的捕捉,防止用户修改后缀来伪造图片 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(); } }
经过上面两部操作就可以实现图片上传前预览功能。
实际使用截图:
相关文章推荐
- 电子笔记
- 禅道项目管理系统
- struts的标签库出现Failed to load or instantiate TagExtraInfo class
- Informatica 9.5.1实验记录
- iOS图片合成————(拍照换发)
- ScrollView ListView GridView
- input只能输入数字和一个小数点
- CentOS安装NodeJS v0.10.25 + Express
- 文件上传分析
- select radio jquery 选择值
- 五种不同的 URL 参数解析方法的性能比较
- js与jquery获取父窗口、子窗口中iframe的方法
- 万维网25岁了
- Leave Morningstar
- 【OpenCV】访问Mat中每个像素的值(新)
- 用System.Attribute扩展元数据
- android模块编译环境创建
- visio 2007 把ER图转换成sql脚本的解决方案
- SQL Server 查询性能优化——创建索引原则(一)
- __cplusplus区分c编译的还是c++编译的