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 键盘事件的几个基本方法
Oct 30 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
微信小程序(应用号)开发新闻客户端实例
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
自己实现ajax封装示例分享
2014/04/01 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python进度条的制作代码实例
2019/08/31 Python
Python如何测试stdout输出
2020/08/10 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
Python实现石头剪刀布游戏
2021/01/20 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
竞选学生会主席演讲稿
2014/04/24 职场文书
大型会议策划方案
2014/05/17 职场文书
学校开学标语
2014/10/06 职场文书
2015年项目工作总结
2015/04/29 职场文书
正规借条模板
2015/05/26 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB