js实现上传图片预览方法

更新时间：2016年10月25日 08:35:56 作者：黎焱

这篇文章主要为大家详细介绍了js实现上传照片预览的方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

图片预览的 javascript 本地操作

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

现代的浏览器功能越来越全面，因此可以实现对一些数据的本地处理 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中Null与Undefined的区别解析
这篇文章主要介绍了JavaScript中Null与Undefined的区别解析,本文给出了多个代码实例讲解它们之间的区别,需要的朋友可以参考下
2015-06-06
layer 关闭指定弹出层的例子
今天小编就为大家分享一篇layer 关闭指定弹出层的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
微信、QQ、微博、Safari中使用js唤起App
本篇文章主要介绍了js在微信、微博、QQ、Safari唤起App的解决方案，有这方面需要的朋友参考下吧。
2018-01-01
JavaScript 异步调用框架 (Part 5 - 链式实现)
在上一篇文章里面，我们为异步调用框架设计了一种链式调用方式，来增强异步调用队列的代码可读性，现在我们就来编写实现这部分功能的代码。
2009-08-08
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
这篇文章主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下
2018-09-09
JS往数组中添加项性能分析
这篇文章主要介绍了JS往数组中添加项性能分析的相关资料,需要的朋友可以参考下
2015-02-02
JavaScript如何将伪数组转换成数组
这篇文章主要介绍了JavaScript如何将伪数组转换成数组，伪数组的主要特征是一个对象，并且该对象有length属性，更多参考内容，需要的小伙伴可以参考一下
2022-07-07
手把手教你写一个微信小程序（推荐）
最近接了一个微信小程序的项目，项目需求是小程序语音识别，全景图片观看，登录授权，获取个人基本信息。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-10-10
在JavaScript 中按字母排序之如何在 JS 中按名称排序
有时你可能有一个单词数组,你想按字母顺序（从 a-z）对每个单词进行排序,或者你可能有一个包含用户信息（包括名字）的对象数组,例如,你想按照用户的名字来排序,接下来通过本文给大家介绍在JavaScript 中按字母排序之如何在 JS 中按名称排序,需要的朋友可以参考下
2023-09-09
Makefile/cmake/node-gyp中区分判断不同平台的方法
今天小编就为大家分享一篇关于Makefile/cmake/node-gyp中区分判断不同平台的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12