html代码

<div id="uploadPreview"></div>
<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" />

js代码

$("#uploadImage").on("change", function(){
// Get a reference to the fileList
var files = !!this.files ? this.files : []; // If no files were selected, or no FileReader support, return
if (!files.length || !window.FileReader) return; // Only proceed if the selected file is an image
if (/^image/.test( files[0].type)){ // Create a new instance of the FileReader
var reader = new FileReader(); // Read the local file as a DataURL
reader.readAsDataURL(files[0]); // When loaded, set image data as background of div
reader.onloadend = function(){ $("#uploadPreview").css("background-image", "url("+this.result+")"); } } });

jquery实现图片上传前的预览的更多相关文章

  1. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  3. 图片上传前的预览(PHP)

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

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

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

  5. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  6. java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  7. file图片上传之前先预览

    链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...

  8. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  9. 分离与继承的思想实现图片上传后的预览功能:ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

随机推荐

  1. [2017-7-28]Android Learning Day7

    View动画效果 透明动画效果 旋转动画效果 移动动画效果 缩放动画效果 混合动画效果 1.透明动画效果(AlphaAnimation) 有两种方法 第一种在活动中设置,不需要xml文件 public ...

  2. [IOI2014]holiday假期(分治+主席树)

    题目描述 健佳正在制定下个假期去台湾的游玩计划.在这个假期,健佳将会在城市之间奔波,并且参观这些城市的景点.在台湾共有n个城市,它们全部位于一条高速公路上.这些城市连续地编号为0到n-1.对于城市i( ...

  3. Tutorial: Build a Spring WebMVC App with Primefaces

    Tutorial: Build a Spring WebMVC App with Primefaces by Team Stormpath | September 7, 2016 | Java Pri ...

  4. mysql connections

    在使用MySQL数据库的时候,经常会遇到这么一个问题,就是“Can not connect to MySQL server. Too many connections”-mysql 1040错误,这是 ...

  5. 【NOIP数论内容整理】

    转载{大佬传送门} 附赠wakelin一句评论:日均二百七,全场rank1:千古神犇ZAY,吊打清华钟皓曦%%%

  6. 第十五节、韦伯局部描述符(WLD,附源码)

    纹理作为一种重要的视觉线索,是图像中普遍存在而又难以描述的特征,图像的纹理特征一般是指图像上地物重复排列造成的灰度值有规则的分布.纹理特征的关键在于纹理特征的提取方法.目前,用于纹理特征提取的方法有很 ...

  7. 第十二节、尺度不变特征(SIFT)

    上一节中,我们介绍了Harris角点检测.角点在图像旋转的情况下也可以检测到,但是如果减小(或者增加)图像的大小,可能会丢失图像的某些部分,甚至导致检测到的角点发生改变.这样的损失现象需要一种与图像比 ...

  8. Solr7.1--- 单机Linux环境搭建

    应网友的要求,写个关于Linux单机的 首先,把MySQL驱动包和solr7.1安装包上传到服务器,我上传到了自定义的目录/mysoft 执行服务安装脚本 1. 先切换到root用户 2. 解压出脚本 ...

  9. 2018.11.26 QLU新生赛部分题解

    问题 L: 寄蒜几盒? 题目描述 现在有一个圆圈,圆圈上有若干个点,请判断能否在若干个点中选择三个点两两相连组成一个等边三角形? 这若干个点在圆圈上按顺时针顺序分布. 如果可以的话输出"Ye ...

  10. linux c 编程 ------ 通过设备节点调用驱动

    驱动程序如下,加载驱动后,会在/dev文件夹下生成一个文件hello_device_node,是此驱动的设备节点 #include <linux/init.h> #include < ...