上传图片时一般都需要预览,我一般用这两种方法来实现。base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了。

//获取对象input file 的图片地址,放进img
  $("#file").change(function () {//input的id
  var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址
  obUrl = objUrl;
  console.log("objUrl = " + objUrl);
  if (objUrl) {
  $("#pic").attr("src", objUrl).show();//选择img的ID,给src赋值
  }
  });   //获取input file的文件地址
  function getObjectURL(file) {
  var url = null;
  if (window.createObjectURL != undefined) {//basic
  url = window.createObjectURL(file);
  } else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
  url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {//webkit or chrome
  url = window.webkitURL.createObjectURL(file);
  }
  return url;
  } //方法二:获取base64编码
$("#file2").change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file); reader.onload = function(e) {
alert(this.result);
$("#pic").attr("src", this.result).show();//选择img的ID,给src赋值
};
});

input上传图片(file),预览图片的两种方法。blob与base64编码的更多相关文章

  1. [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  2. input上传图片并预览

    首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...

  3. UIImage加载图片的两种方法区别

    Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...

  4. AE 将地图导出为图片的两种方法

    在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...

  5. PHP jQuery实现上传图片时预览图片的功能实例

    在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...

  6. input上传图片 显示预览信息

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  8. input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决

    html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...

  9. angular +H5 上传图片 与预览图片

    //index.html <form class="form-horizontal"> <div class="panel panel-default& ...

随机推荐

  1. 高可用的Spring FTP上传下载工具类(已解决上传过程常见问题)

    前言 最近在项目中需要和ftp服务器进行交互,在网上找了一下关于ftp上传下载的工具类,大致有两种. 第一种是单例模式的类. 第二种是另外定义一个Service,直接通过Service来实现ftp的上 ...

  2. Java爬虫实践--爬取CSDN网站图片为例

    实现的效果,自动在工程下创建Pictures文件夹,根据网站URL爬取图片,层层获取.在Pictures下以网站的层级URL命名文件夹,用来装该层URL下的图片.同时将文件名,路径,URL插入数据库, ...

  3. ViewPager使用记录3——循环展示

    ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...

  4. linux下yum安装redis以及使用

    1.yum install redis      --查看是否有redis   yum 源 2.yum install epel-release    --下载fedora的epel仓库 3. yum ...

  5. IEEE Trans 2008 Gradient Pursuits论文学习

    之前所学习的论文中求解稀疏解的时候一般采用的都是最小二乘方法进行计算,为了降低计算复杂度和减少内存,这篇论文梯度追踪,属于贪婪算法中一种.主要为三种:梯度(gradient).共轭梯度(conjuga ...

  6. maven jetty struts异常 There is no Action mapped for namespace [/] and action name [] associated with context path

    毕业设计中用maven jetty插件调试时,struts出现这个错误,直接http://localhost:8080 无法进入默认主页,但换tomcat就没问题,最后在这篇文章找到答案 http:/ ...

  7. 最全Pycharm教程(32)——依据FHS在Linux上安装Pycharm

    1.主题 怎样在Linux上安装Pycharm,依据FHS. 2.平台要求 Intel Pentium III/800 MHz或更高. 内存最小512M.建议1G以上 屏幕最小分辨率1024x768 ...

  8. 豌豆夹Redis解决方式Codis源代码剖析:Proxy代理

    豌豆夹Redis解决方式Codis源代码剖析:Proxy代理 1.预备知识 1.1 Codis Codis就不详细说了,摘抄一下GitHub上的一些项目描写叙述: Codis is a proxy b ...

  9. Android Api 检查參数状态Api

    转载请注明出处:http://blog.csdn.net/droyon/article/details/39938677 在进行Android应用程序开发中,android提供了一个非常好的工具类,来 ...

  10. Ajax 学习总结

    Ajax 技术在 JavaWeb 应用中随处可见,比如购物车中根据商品数量及时更新等应用,那么我们今天就来说说 Ajax 的一些小应用! Ajax 技术也就是允许浏览器与服务器通信而无需刷新当前页面, ...