基于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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
记一次react前端项目打包优化的方法
Mar 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
如何真正的了解python装饰器
2020/08/14 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
电子商务个人自荐信
2013/12/12 职场文书
中学教师自我鉴定
2014/02/07 职场文书
生产助理岗位职责
2014/06/18 职场文书
财务工作个人总结
2015/02/27 职场文书
求职简历自我评价范文
2015/03/10 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
基于docker安装zabbix的详细教程
2022/06/05 Servers