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. String Reconstruction (并查集)

    并查集维护和我这个位置的字母连续的已经被填充的字母能到达的最右边的第一个还没有填充的位置,然后把这个位置填上应该填的东西,然后把这个位置和下一个位置连接起来,如果下一个位置还没有填,我就会把下一个位置 ...

  2. HDU 6319 Problem A. Ascending Rating(单调队列)

    要求一个区间内的最大值和每次数过去最大值更新的次数,然后求每次的这个值异或 i 的总和. 这个序列一共有n个数,前k个直接给出来,从k+1到n个数用公式计算出来. 因为要最大值,所以就要用到单调队列, ...

  3. CF1131F Asya And Kittens(Kruskal重构树,启发式合并)

    这题难度1700,我感觉又小了…… 这题虽然没几个人是用kruskal重构树的思想做的,但是我是,所以我就放了个kruskal重构树的标签. 题目链接:CF原网 题目大意:有一个长为 $n$ 的排列, ...

  4. Luogu--3381 【模板】最小费用最大流

    题目链接 3381 [模板]最小费用最大流 手写堆版本 dijkstra   400+ms 看来优先队列的常数好大 #include<bits/stdc++.h> using namesp ...

  5. Windows Update第三方工具概览

    受方程式黑客组织0Day攻击影响,所有的Windows服务器都要更新补丁. 方程式0day漏洞攻击介绍:https://zhuanlan.zhihu.com/p/26375989 腾讯云的解决方案:h ...

  6. JS监听滚动条进度

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <s ...

  7. django基于中间件的IP访问频率控制

    一.中间件的代码 注意:成功时返回的是None,那样才会走视图层,返回httpresponse就直接出去了 import time from django.utils.deprecation impo ...

  8. matlab图片 latex显示

    matlab图片另存为bmp格式,用在线网站转换格式为png. 莫要直接另存为jpg格式,在latex中显示,否则图片显示的质量不高.

  9. POJ 2987 Firing (最大权闭合图)

    Firing Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 12108   Accepted: 3666 Descript ...

  10. JS学习笔记Day6

    一.数组 1.数组就是个容器,里面可以存放任意类型的数 2.定义数组:1)var arr = []: 2)var arr = new Array():构造函数定义方式,如果括号中有一个整数,该正数代表 ...