基于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实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
一个可复用的vue分页组件
May 15 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
vue下拉列表功能实例代码
Apr 08 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
杏林同学录(三)
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP学习笔记之二
2011/01/17 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php微信支付之APP支付方法
2015/03/04 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php测试kafka项目示例
2020/02/06 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
js分页代码分享
2014/04/28 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python实现百度语音识别api
2018/04/10 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python打印不合法的文件名
2020/07/31 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
会计专业毕业生求职信分享
2014/01/03 职场文书
人力资源职位说明书
2014/07/29 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript