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. 739. Daily Temperatures && 单调栈 && Python collections deque

    题目大意 给你接下来每一天的气温,求出对于每一天的气温,下一次出现比它高气温的日期距现在要等多少天 解题思路 利用单调栈,维护一个单调递减的栈 将每一天的下标i入栈,维护一个温度递减的下标 若下一个温 ...

  2. 使用Coverage进行代码覆盖率的测试

    软件测试实验报告 一.实验目的: 使用软件测试代码覆盖率. 二.实验工具: Windows10.Python3.6.3.Coverage. 三.实验内容: 1.编写准备测试的代码main.py和测试代 ...

  3. HDU 4549 M斐波那契数列(矩阵快速幂)

    题目链接:M斐波那契数列 题意:$F[0]=a,F[1]=b,F[n]=F[n-1]*F[n-2]$.给定$a,b,n$,求$F[n]$. 题解:暴力打表后发现$ F[n]=a^{fib(n-1)} ...

  4. J2EE--常见面试题总结 -- ( 一)

    StringBuilder和StringBuffer的区别: String       字符串常量   不可变  使用字符串拼接时是不同的2个空间 StringBuffer  字符串变量   可变   ...

  5. Python中Scrapy框架元素选择器XPath的简单实例

    原文标题:<Python网络爬虫-Scrapy的选择器Xpath> 对原文有所修改和演绎 优势 XPath相较于CSS选择器,可以更方便的选取 没有id class name属性的标签 属 ...

  6. bzoj4036[HAOI2015]set 按位或

    Vfk的集合幂级数论文的例题….随机集合并为全集的期望集合数….这篇题解里的东西基本来自vfk的论文. 首先根据期望的线性性,我们把需要走第1步的概率(一定为1)加上需要走第2步的概率(等于走了第一步 ...

  7. Redis高并发和快速的原因

    一.Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间:   3.redis使用多路复用技术,可以处理并发的连接 ...

  8. 表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. Filter(过滤器)

    一.Filter过滤器(重要) Javaweb中的过滤器可以拦截所有访问web资源的请求或响应操作. 1.Filter快速入门 1.1.步骤: 1. 创建一个类实现Filter接口 2. 重写接口中方 ...

  10. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...