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 26 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Vue form表单动态添加组件实战案例
Sep 02 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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 max_execution_time执行时间问题
2011/07/17 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
django admin后台添加导出excel功能示例代码
2019/05/15 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
C#可否对内存进行直接的操作
2015/02/26 面试题
优秀高中生事迹材料
2014/02/11 职场文书
小松树教学反思
2014/02/11 职场文书
安全教育实施方案
2014/03/02 职场文书
青年志愿者活动方案
2014/08/17 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
教师继续教育反思周记
2015/06/25 职场文书
五年级作文之成长
2019/09/16 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python