jquery实现图片上传前的预览
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实现图片上传前的预览的更多相关文章
- jquery实现图片上传前本地预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- 图片上传前的预览(PHP)
1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- file图片上传之前先预览
链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- 分离与继承的思想实现图片上传后的预览功能:ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
随机推荐
- MySQL数据库简单查询
--黑马程序员 DQL数据查询语言 数据库执行DQL语句不会对数据进行改变,而是让数据库发送结果集给客户端.查询返回的结果集是一张虚拟表. 查询关键字:SELECT 语法: SELECT 列名 FRO ...
- POJ3734Blocks(递推+矩阵快速幂)
题目链接:http://poj.org/problem?id=3734 题意:给出n个排成一列的方块,用红.蓝.绿.黄四种颜色给它们染色,求染成红.绿的方块个数同时为偶数的方案数模10007的值. 题 ...
- 中性SNP的突变年龄评估(estimate the average age of a neutral two-allele polymorphism)
假设中性突变的频率分别为P和1-P,则其突变年龄为:-4Ne[p*( logep)+(1-p)* loge (1-p)] The average age of a neutral two-allele ...
- 【译】7. Java反射——私有字段和私有方法
原文地址:http://tutorials.jenkov.com/java-reflection/private-fields-and-methods.html =================== ...
- 第十二节,TensorFlow读取数据的几种方法以及队列的使用
TensorFlow程序读取数据一共有3种方法: 供给数据(Feeding): 在TensorFlow程序运行的每一步, 让Python代码来供给数据. 从文件读取数据: 在TensorFlow图的起 ...
- scrapy关键字爬取百度图库(一)
刚入门学习python的菜鸟,如有错误,还望指教 爬取百度图库需要知道百度图库的加载方式是通过下拉加载的,所以我们需要分析Ajax请求来爬取每一页的数据信息 表述不清直接上图片 图片一是刷新页面后加载 ...
- mongodb的sql日志
在Yii2中是没有打印出mongodb的sql语句,故借用下log来查看吧. 在网上有说可以使用$model->find()->createCommand()->getRawSql( ...
- php 4种传值方式
我们定义page01.php和page02.php两个php文件,将page01中的内容想办法传递到page02,然后供我们继续使用. 第一种: 使用客户端浏览器的cookie.cookie很 ...
- Vue.js 条件与循环
条件判断: v-if: 条件判断使用 v-if 指令: v-else-if:(其实和Java,c,js的语法差不多) v-show:
- nGrinder windows agent / linux agent
s ngrinder部署 https://blog.csdn.net/yue530tomtom/article/details/82113558 Windows机器启动不了ngrinder-agent ...