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

  1. //获取对象input file 的图片地址,放进img
  2.   $("#file").change(function () {//input的id
  3.   var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址
  4.   obUrl = objUrl;
  5.   console.log("objUrl = " + objUrl);
  6.   if (objUrl) {
  7.   $("#pic").attr("src", objUrl).show();//选择img的ID,给src赋值
  8.   }
  9.   });
  10.  
  11.   //获取input file的文件地址
  12.   function getObjectURL(file) {
  13.   var url = null;
  14.   if (window.createObjectURL != undefined) {//basic
  15.   url = window.createObjectURL(file);
  16.   } else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
  17.   url = window.URL.createObjectURL(file);
  18.   } else if (window.webkitURL != undefined) {//webkit or chrome
  19.   url = window.webkitURL.createObjectURL(file);
  20.   }
  21.   return url;
  22.   }
  23.  
  24. //方法二:获取base64编码
  25. $("#file2").change(function() {
  26. var file = this.files[0];
  27. var reader = new FileReader();
  28. reader.readAsDataURL(file);
  29.  
  30. reader.onload = function(e) {
  31. alert(this.result);
  32. $("#pic").attr("src", this.result).show();//选择img的ID,给src赋值
  33. };
  34. });

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. 【转】Visual Studio Code 使用Git进行版本控制

    原文链接:https://www.cnblogs.com/xuanhun/p/6019038.html?utm_source=tuicool&utm_medium=referral 本来认为此 ...

  2. Wannafly挑战赛5 补题

    A 珂朵莉与宇宙 题目链接: https://www.nowcoder.com/acm/contest/36/A 思路: 科学暴力:枚举前缀和,同时计算前缀和里面可能出现的完全平方数,匹配前缀和 与完 ...

  3. js 数组去重复的方法

    数组去重复是js中常用的方法,归纳了四种如下: 1. for + indexOf  去重复 var arr = [3,5,5,4,1,1,2,3,7,2,5]; var target = []; fo ...

  4. centOS 搭建pipelineDB docs

    #下载docs git clone https://github.com/pipelinedb/docs.git #安装python-sphinx &python-dev yum instal ...

  5. Hbuilder app开发,使用mui.ajax和服务器交互,后台获取不到值,显示null的解决方法

    先上一个能用的js代码: function login() { var uname=document.getElementById("username").value.trim() ...

  6. WPF 外发光效果

    WPF的滤镜效果,目前框架自带的只有BlurEffect和DropShadowEffect两种.DropShadowEffect为投影效果,只能显示黑灰颜色的效果,如果想让一个边框达到别的颜色的滤镜效 ...

  7. speedment 入门教程

    speedment 是基于 Java8 的 orm 框架,相比较 hibernate 和 mybatis 你只要很少的代码就可以实现对数据库的操作,而且根据查询自动帮你优化SQL,开发者无需编写SQL ...

  8. Java中用Apache POI生成excel和word文档

    概述: 近期在做项目的过程中遇到了excel的数据导出和word的图文表报告的导出功能.最后决定用Apache POI来完毕该项功能.本文就项目实现过程中的一些思路与代码与大家共享.同一时候.也作为自 ...

  9. 【Access2007】解救被阉割的truncate

    Access2007使用被阉割的J-SQL语句,语法跟T-SQL语句.也就是寻常最标准的SQL语句一模一样,但就是仅保留insert into,delete,select,update与没太大意义的过 ...

  10. Django的Form(二)

    上一篇已经简单介绍了Django的Form,现在开始进阶操作了 ..... 创建Form类的时候,主要涉及到Form字段和Form的插件,字段用于做form验证,插件用来生成HTML DjiangoF ...