js实现上传图片预览方法


Posted in Javascript onOctober 25, 2016

图片预览的 javascript 本地操作

js实现上传图片预览方法

早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览

现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox 

上图的html

<tr>
<td>缩略图</td>
<td>
<a href="javascript::void(0)" class="fileBtn">

选择文件

<input type="file" id="file_pic">

</a>
</td>
</tr>
<tr>
<td></td>
<td><img id="file_view" style="width:110px"></td>
</tr>
// 下面用于图片上传预览功能 objc : { file, pic, width }
 
yqUI.setImagePreview = function(objc) {
 
 var docObj=document.getElementById(objc.file);
 
 var imgObjPreview=document.getElementById(objc.pic);
 if(docObj.files &&docObj.files[0]){
 
 imgObjPreview.style.display = 'block';
 imgObjPreview.style.width = objc.width;
 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
  
 return true;
 } else {
 return false;
 };
 
};
 
// 使用该控件, opts 配置对象
 
var opts = {
file : 'file_pic',

pic : 'file_view',

width : '180px'
}
 
yqUI.setImagePreview(opts);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
HTML的select控件美化
Mar 27 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
微信小程序(应用号)开发新闻客户端实例
Oct 24 #Javascript
微信小程序 倒计时组件实现代码
Oct 24 #Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 #Javascript
微信小程序 购物车简单实例
Oct 24 #Javascript
Select2.js下拉框使用小结
Oct 24 #Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
机器学习10大经典算法详解
2017/12/07 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python实现logistic分类算法代码
2020/02/28 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
高一英语教学反思
2014/01/22 职场文书
环境日宣传活动总结
2014/07/09 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
创业计划书之花店
2019/09/20 职场文书