上传图片时一般都需要预览,我一般用这两种方法来实现。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. leetcode算法题1: 两个二进制数有多少位不相同?异或、位移、与运算的主场

    /* The Hamming distance between two integers is the number of positions at which the corresponding b ...

  2. Python3.6_安装numpy

    刚刚编辑了一次,但是犯了新手都会犯的没保存的错误,第二次编辑可能略有粗糙,如有问题欢迎指正 想用Python 画图,但是我的是vs自动安装的因此缺少许多必要的库,在安装的过程中也是遇到了诸多问题,下面 ...

  3. CentOS7操作系统参数优化

    生产环境配置需要标准化,将常用操作写成脚本用于操作系统的初始化. #!/bin/bash #Date:2017 #This Script is for centos7.3 init #01.配置yum ...

  4. javascript中break,continue和return语句用法小结:

    Break语句会使程序立刻退出包含在最底层的循环或者退出一个switch语句,它是用来退出循环或者switch语句. 例如: <script type="text/javascript ...

  5. OI大佬博客集

    郭家宝:byvoid  早年大牛,题解更新到2014年,其博客内容非常丰富,不止题解 hzwer:hzwer 从OI到ACM,一直在更新 陈立杰:WJMZBMR 无需解释,不过貌似只更到2015 顾森 ...

  6. 【NOI2015】程序自动分析

    https://www.luogu.org/problem/show?pid=1955 并查集+离散化. 先执行所有x=y问题,即合并x和y. 再依次执行所有x!=y问题,即查询x和y是否处于同一集合 ...

  7. 【NOI2005】维护数列

    https://daniu.luogu.org/problem/show?pid=2042 一道伸展树维护数列的很悲伤的题目,共要维护两个标记和两个数列信息,为了维护MAX-SUM还要维护从左端开始的 ...

  8. 认知服务调用如何使用图片的DataURL

    说明: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成b ...

  9. 【Java入门提高篇】Day8 Java内部类——匿名内部类

    今天来看看另一个更加神奇的类--匿名内部类. 就像它的名字表示的那样,这个类是匿名的,用完之后,深藏功与名,就像扫地僧那样默默潜藏于深山之中.匿名内部类不仅没有名字,连class关键字都省掉了,而且匿 ...

  10. html Embed用法 页面播放视频

    一句话概括所有问题.查资料说在页面播放视频都是一些插件 刚发现一个Html自带的标签 很吊的样子 <div >          <embed  src="${compla ...