实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库。

但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般会选择存图片路径的方式,这样有助于减小数据库压力,base64

编码后的图片信息是一个很长的字符串,一般我们使用longText类型来将其存入数据库。

html代码如下:

<div class="col-sm-6">
  <img id="headPortraitImgShow" src="img/defaultHeadPoint.jpg" alt="" width="160px" height="180px" />
  <input type="file" id="headPortraitUpload" style="margin-top:10px;">
</div>

javaScript代码如下:

$("#headPortraitUpload").on("change",headPortraitListener);

/*定义全局变量存贮图片信息*/
 var base64head="";

/*头像上传监听*/
function headPortraitListener(e) {
var img = document.getElementById('headPortraitImgShow');
if(window.FileReader) {
var file = e.target.files[0];
var reader = new FileReader();
if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
} else {
img.css('display', 'none');
img.attr('src', '');
}
reader.onloadend = function (e) {
img.setAttribute('src', reader.result);
base64head = reader.result;
}
}
}

效果预览:默认图片-----》效果图

      

最后,将base64head提交到后台存入数据库即可,下次从数据库取出直接将该base64信息放到img标签的src里面图片就回显出来了

js实现图片上传预览功能,使用base64编码来实现的更多相关文章

  1. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  3. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  5. JQ实现图片上传预览功能

    <input type="file" name="img" id="test1"> <img src="&quo ...

  6. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  7. JS实现图片上传预览效果:方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  8. HTML+Jquery实现多图片上传预览功能

    HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...

  9. 使用ajax,结合jquery,php实现图片上传预览功能

    大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...

随机推荐

  1. jexus5.8.2 linux x64专业版 配置https

    一.环境 1.jexus版本:Jexus/5.8.2.8 Linux专业版 内置mono版本:Mono/4.6.2.7 2.操作系统:centOs7 jexus独立版由于是免安装版并且内置mono,所 ...

  2. new road

    9月底进入到了新的公司,有些类似实习的时候的路程. 新公司的数据业务基本是一种幻想状态,完全没有什么数据方面的积淀.

  3. Android:控件布局(绝对布局)AbsoluteLayout

    绝对布局也叫坐标布局,指定元素的绝对位置,因为适应性很差,一般很少用到.可以使用RelativeLayout替代. 常用属性: android:layout_x  --------组件x坐标 andr ...

  4. OpenStreetMap(OSM) features

    目录 1 Primary features 1.1 Aerialway 1.2 Aeroway 1.3 Amenity 1.3.1 Sustenance 1.3.2 Education 1.3.3 T ...

  5. 第一章 开发简单Java应用程序

    1. 什么是程序?     程序一词来自生活,通常指完成某些事务的一种既定方式和过程(一组有序指令的集合). 2. Java的三个领域? Java SE:java技术核心(指桌面应用程序)如:QQ.百 ...

  6. git清空某个文件的历史版本

    比如你要清空文件private.ini git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch priva ...

  7. RealTek WiFi 模块 RTL8710AF RTL8711AF RTL8711AM RTL8195AM

    瑞昱 8710 是一个完整且自成体系的 WiFi 网络解决方案, 能够独立运行,也可以作为从机搭载于其他主机 MCU 运行. 瑞昱 8710 在搭载应用并作为设备中唯⼀的应⽤处理器时,能够直接从外接闪 ...

  8. leetcode1031

    class Solution(object): def getMaxByCount(self,A,maxlen): curmax = 0 curmax = sum(A[:maxlen]) bigmax ...

  9. python web.py实现简单的get和post请求

    使用web.py框架,实现简单的get和post请求: py文件名:mytest.py import web urls = ( '/', 'hello' ) app = web.application ...

  10. servlet 验证码生成

    servlet package com.htpo.net; import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D; ...