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);


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 

相关文章

  • 非html5实现js版弹球游戏示例代码

    非html5实现js版弹球游戏示例代码

    弹球游戏,一般都是使用html5来实现的,其实不然,使用js也可以实现类似的效果,下面有个不错的示例,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • HTML5 js实现拖拉上传文件功能

    HTML5 js实现拖拉上传文件功能

    这篇文章主要为大家详细介绍了HTML5实现拖拉上传文件功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js实现多张图片打包成zip

    js实现多张图片打包成zip

    图片下载是前端常见的需求,如果一张一张下载未免太影响体验了,于是写下了这个多张图片打包成zip的demo
    2021-05-05
  • 微信小程序实现时间选择

    微信小程序实现时间选择

    这篇文章主要为大家详细介绍了微信小程序实现时间选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • bootstrap 弹出框modal添加垂直方向滚轴效果

    bootstrap 弹出框modal添加垂直方向滚轴效果

    这篇文章主要介绍了bootstrap 弹出框modal添加垂直方向滚轴效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    这篇文章主要为大家详细介绍了微信小程序实现吸顶特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js与jquery回车提交的方法

    js与jquery回车提交的方法

    这篇文章主要介绍了js与jquery回车提交的方法,实例分析了js与jQuery中监测及相应回车键实现提交的技巧,需要的朋友可以参考下
    2015-02-02
  • javascript计算用户打开网页的停留时间

    javascript计算用户打开网页的停留时间

    本文介绍了javascript计算用户打开网页的停留时间,大家参考使用吧
    2014-01-01
  • JS 实现获取打开一个界面中输入的值

    JS 实现获取打开一个界面中输入的值

    JS 实现获取打开一个界面中输入的值,需要的朋友可以参考一下
    2013-03-03
  • 老生常谈javascript中逻辑运算符&&和||的返回值问题

    老生常谈javascript中逻辑运算符&&和||的返回值问题

    下面小编就为大家带来一篇老生常谈javascript中逻辑运算符&&和||的返回值问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论