基于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 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
javascript基础知识
Jun 07 Javascript
js实现动态显示时间效果
Mar 06 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
微信小程序实现购物车小功能
Dec 30 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
利用javascript查看html源文件
2006/11/08 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
了解重排与重绘
2019/05/29 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
物业管理应届生求职信
2013/10/28 职场文书
普通员工辞职信
2014/01/17 职场文书
英语教师求职信
2014/06/16 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
公司酒会致辞
2015/07/30 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript