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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jQuery 浮动广告实现代码
Dec 25 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python字典key不能是可以是啥类型
2020/08/04 Python
python实现学生信息管理系统源码
2021/02/22 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
给国外客户的邀请函
2014/01/30 职场文书
安全生产活动月方案
2014/03/09 职场文书
公司运动会策划方案
2014/05/25 职场文书
体育课外活动总结
2014/07/08 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
Python 中面向接口编程
2022/05/20 Python