input上传图片(file),预览图片的两种方法。blob与base64编码
上传图片时一般都需要预览,我一般用这两种方法来实现。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编码的更多相关文章
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- input上传图片并预览
首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...
- UIImage加载图片的两种方法区别
Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...
- AE 将地图导出为图片的两种方法
在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...
- PHP jQuery实现上传图片时预览图片的功能实例
在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...
- input上传图片 显示预览信息
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- uploadPreview上传图片前预览图片
uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...
- angular +H5 上传图片 与预览图片
//index.html <form class="form-horizontal"> <div class="panel panel-default& ...
随机推荐
- gitlab环境搭建
企业级的git管理程序.最好用的之一吧.估计其它的也得叫之二. 怎么搭建呢? 2G以上配置的机器才可以搞. . 如下 安装需要注意的是.如果开了80端口,8080的需要修改配置文件 下面会提到 1. ...
- mysql 有哪些索引
Mysql支持哪几种索引 从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=&quo ...
- Git命令汇总(基础篇)
自己用Git有一段时间了,随着项目越来越多,功能分支也随之增加,从简单的基础命令到随心所欲,需要自己不断地去尝试总结,下面来分享一下我的Git使用总结. 本章基础篇主要讲解一些Git代码提交流程和Gi ...
- 利用spring,实现package下的类扫描
项目中需要用到包扫描的情况是很多的,一般是在项目初始化的时候,根据一些条件来对某个package下的类进行特殊处理.现在想实现的功能是,在一个filter或interceptor初始化的时候,扫描指定 ...
- Spring之bean二生命周期
上一博客主要学习了下bean的配置.注入.自定义属性编辑器,今天来熟悉bean的生命周期.在开发中生命周期是一个很常见的名词,基本每种编程语言都能找到与它关联的.关于bean的生命周期我在网上也找了好 ...
- java设计模式—多工厂模式
概念 多个工厂模式,是对普通工厂方法的改进,在普通工厂模式中,如果字符串传递出错,则不能正 确创建对象,而多个工厂模式是提供多个工厂方法,分别创建对象. 多个工厂模式关 ...
- maven的安装配置以及在IDEA中配置
一.下载maven: 1.maven官网:http://maven.apache.org/download.cgi 二.安装配置 1.下载后解压到本地目录,如图 2.配置环境变量:我的电脑右键-> ...
- IP协议和网络传输中的封装与分用。
关于七层模型和四层模型可以参考这个:http://www.cnblogs.com/xcywt/p/5027277.html 因为四层模型用的比较多,这里只拿四层模型来分析. 1.四层模型中的最下层是链 ...
- Selenium与phantomJS 登入豆瓣 有bug
# -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver.common.keys import Key ...
- java中md5加密方法
package com.func; import java.io.UnsupportedEncodingException;import java.math.BigInteger;import jav ...