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. django pymysql

    此处django版本为1.11.13 设置setting.py DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NA ...

  2. Ocean的礼物(线段树单点修改)

    题目链接:http://oj.ismdeep.com/contest/Problem?id=1284&pid=0 A: Ocean的礼物 Time Limit: 5 s      Memory ...

  3. 关于Ubuntu18.04谷歌浏览器经常卡死的解决

    老电脑本来用的是Win系列,后来改成Linux后就不卡了,这几天同Notebook运行的Script开始复杂了,Ubuntu经常卡死(发公众号也经常卡死),本来以为是Ubuntu的问题 后来一想,不对 ...

  4. UOJ#418. 【集训队作业2018】三角形

    #418. [集训队作业2018]三角形 和三角形没有关系 只要知道儿子放置的顺序,就可以直接模拟了 记录历史最大值 用一个pair(a,b):之后加上a个,期间最大值为增加b个 合并? A1+A2= ...

  5. bouncing-balls

    效果如下: 代码目录如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse ...

  6. django 前端模板继承显示model中使用choices的字段

    比如model中的一个class Need class Need(models.Model): """ 任务 """ party_a=mod ...

  7. MongoDB 学习记录(二)yum安装

    前言:接着上篇继续学习MongoDB,这次学习的是在Linux下安装MongoDB 环境:centos7.3 安装版本:MongoDB4.0 官网安装教程地址 https://docs.mongodb ...

  8. pytest 2.测试用例setup和teardown

    之前我写的unittest的setup和teardown,还有setupClass和teardownClass(需要配合@classmethod装饰器一起使用),接下来就介绍pytest的类似于这类的 ...

  9. (注意输入格式)bistuoj(旧)1237 成绩统计

    成绩统计 Time Limit(Common/Java):1000MS/3000MS          Memory Limit:65536KByteTotal Submit:88          ...

  10. Mac影音多媒体工具软件推荐

    今天和大家分享软件专题:「影音多媒体工具」,今天的「影音多媒体工具」主要包含音乐播放.音频编辑.视频播放.视频编辑.截图录像等类别的软件. 有需要其他类型的软件,可在评论区留言或私信于我[磨人的小妖精 ...