基于JavaScript FileReader上传图片显示本地链接


Posted in Javascript onMay 27, 2016

简介

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.

基于JavaScript FileReader上传图片显示本地链接

基于JavaScript FileReader上传图片显示本地链接

页面中多个,上传多个图片DEMO代码

<!Doctype html>
<html>
 <head>
 <title>上传图片显示预览图</title>
 <style>
  #result img{
  height:100px;
  display:inline-block;
  margin-right:10px;
  margin-bottom:10px;
  }
 </style>
 </head>
 <body>
 <div class="add_imgs">
  <p> 
  <label>请选择一个图像文件:</label> 
  <input type="file" id="file_input" style="display:none;" /> 
  </p> 
  <div id="result">
  <a href="javascript:void(0);" class="add_img_btn">添加图片</a>
  </div> 
 </div>
 <div class="add_imgs">
  <p> 
  <label>请选择一个图像文件:</label> 
  <input type="file" id="file_input" style="display:none;" /> 
  </p> 
  <div id="result">
  <a href="javascript:void(0);" class="add_img_btn">添加图片</a>
  </div> 
 </div>
 <script src="jquery-2.2.1.min.js"></script>
 <script>
  $(".add_img_btn").unbind("click").on("click",function(){
  $(this).parents(".add_imgs").find("input[type=file]").click();
  var result = $(this).parent(); 
  var input = $(this).parents(".add_imgs").find("input[type=file]");
  dads(result,input);
  })
  
  
  function dads(result,input){
  if(typeof FileReader==='undefined'){ 
   result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; 
   input.setAttribute('disabled','disabled'); 
  }else{ 
   $(input).unbind("change").on("change",function(){
   var file = this.files[0]; 
   if(!/image\/\w+/.test(file.type)){ 
    alert("文件必须为图片!"); 
    return false; 
   } 
   var reader = new FileReader(); 
   reader.readAsDataURL(file); 
   reader.onload = function(e){ 
    $(result).append('<img src="'+this.result+'" alt="" />'); 
   } 
   })
  } 
  }
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家学习JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
jquery 插件学习(四)
Aug 06 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
javascript实现2048游戏示例
May 04 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 #Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 #Javascript
js基于cookie方式记住返回页面用法示例
May 27 #Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 #Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 #Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 #Javascript
js实现div模拟模态对话框展现URL内容
May 27 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
js图片上传的封装代码
2017/08/01 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python中xrange和range的区别
2014/05/13 Python
全面解读Python Web开发框架Django
2014/06/30 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
JMS中Topic和Queue有什么区别
2013/05/15 面试题
教师自我鉴定
2013/12/13 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
庆六一宣传标语
2014/10/08 职场文书
2014年组织部工作总结
2014/11/14 职场文书
个人先进事迹材料
2014/12/29 职场文书
集结号观后感
2015/06/08 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis