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 相关文章推荐
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
原生js实现放大镜
Feb 20 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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之数据库操作详解及乱码解决!
2007/01/02 PHP
php 的反射详解及示例代码
2016/08/25 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python入门学习指南分享
2018/04/11 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
新闻通讯稿范文
2015/07/22 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python