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. 实验八 应用层协议Ⅱ-FTP协议分析

    实验八 应用层协议Ⅱ-FTP协议分析 一.实验目的 1.掌握FTP协议的实现原理. 2.了解控制通道和数据通道. 二.实验内容 用WareShark追踪ftp连接. 1.三次握手 2.ftp服务器回发 ...

  2. Visible Trees HDU - 2841(容斥)

    对于已经满足条件的(x1,y1),不满足条件的点就是(n*x1,n*y1),所以要求的就是满足点(x,y)的x,y互质,也就是gcd(x,y) == 1,然后就可以用之前多校的方法来做了 另f[i] ...

  3. NOIP2013华容道(BFS+乱搞)

    n<=30 * m<=30 的地图上,0表示墙壁,1表示可以放箱子的空地.q<=500次询问,每次问:当空地上唯一没有放箱子的空格子在(ex,ey)时,把位于(sx,sy)的箱子移动 ...

  4. base64加密图片处理

    场景:下载html中内嵌的base64加密图片 举个例子,博客园的插入图片有两种方式,一是引用图片链接,二是直接粘贴2进制图片文件.以第二种方式的图片则是以base64加密的方式内嵌在html页面中. ...

  5. hdu6148 百度之星程序设计竞赛复赛 (数位dp)

    Valley Numer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  6. Arch更新时failed to prepare transaction

    error: failed to prepare transaction (could not satisfy dependencies) :: ffmpeg2.8: installing x265 ...

  7. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  8. Failed to resolve: com.android.support:appcompat-v7:28 问题解决

    apply plugin: 'com.android.application' android { compileSdkVersion buildToolsVersion "28.0.2&q ...

  9. 让mysql监听ipv4

    系统:centos7 关闭ipv6方法: 方法1:编辑/etc/sysctl.conf文件,添加如下两行到文件 net.ipv6.conf.all.disable_ipv6 = 1 net.ipv6. ...

  10. MySQL mysqldump 导入/导出 结构&数据&存储过程&函数&事件&触发器

    ———————————————-库操作———————————————-1.①导出一个库结构 mysqldump -d dbname -u root -p > xxx.sql ②导出多个库结构 m ...