基于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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python使用xslt提取网页数据的方法
2018/02/23 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python实现吃苹果小游戏
2020/03/21 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
新农村建设典型材料
2014/05/31 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python