<label class="file_img" for="file_imgs">
<input class="file_imgs" id='file_imgs' type="file" accept="image/jpg,image/jpeg,image/png" name="file" />
<img class="file_imgb" src="./images/file_img.jpg">
</label>
<div class="show_imgs"> </div>

html

 $('#file_imgs').on('change',function () {
var file = $('#file_imgs').get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
console.log(reader);
$('.show_imgs').append(`<img class="show_imgs_item" src="${reader.result}" />`);
}
})

超简单的jq图片上传的更多相关文章

  1. jq 图片上传前预览

    html: <div class="form_upload"> <input type="file" id="uploadImg&q ...

  2. jq 图片上传

    1.html <input type="file" class="ImgInput" name="ImgInput"/> 2.j ...

  3. SpringBoot图片上传(三)——调用文件上传项目的方法(同时启动两个项目)

    简单说明:图片上传有一个专门的工程A,提供了图片的上传和下载预览,工程B涉及到图片上传以及回显,都是调用的工程A的方法,言外之意就是要同时启动两个项目. 代码: //工程B的html代码 <di ...

  4. Retrofit 2.0 超能实践(三),轻松实现文件/多图片上传/Json字符串

    文:http://blog.csdn.net/sk719887916/article/details/51755427 Tamic 简书&csdn同步 通过前两篇姿势的入门 Retrofit ...

  5. 简单2步实现 asp.net mvc ckeditor 图片上传

    1.打开ckeditor 包下的  config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...

  6. 一个简单的安卓+Servlet图片上传例子

    例子比较 简单,服务端为Java Web Servlet,doPost方法中接收图片并保存,然后将保存的图片名返回给客户端,关键代码: @SuppressWarnings("deprecat ...

  7. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  8. ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

  9. jq实现批量图片上传

    http://blog.csdn.net/lmj623565791/article/details/31513065 jq实现批量图片上传 http://blog.csdn.net/lmj623565 ...

随机推荐

  1. JavaWeb网上图书商城完整项目--day02-18.修改密码页面处理

    1.用户登陆成功之后会显示 当点击修改密码的时候,会进入下面的页面 对应的是pwd.jsp这个文件 我们把对jsp页面前段的校验都封装在pwd.js中,在jsp中引入该js文件 <%@ page ...

  2. linux 在指定文件夹下查找指定字符

    grep -r '119090610015743205' /data/html/www/gap_bz_middleware/storage/apiLogs/

  3. Flink1.10全文跟读翻译

    前言 突然的一个想法,我想把flink官网英语版全部看一遍翻译出来,并且带上自己的理解.自己不是什么大神,只是想这样做一遍,有人说不是有中文版,因为我自己想练习一下英语和对flink的理解吧!工作是一 ...

  4. Redis高级特性介绍以及实例分析

    Redis基础类型回顾 转自:http://www.jianshu.com/p/af7043e6c8f9 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的Stri ...

  5. js修改函数内部的this指向(bind,call,apply)

    js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...

  6. ie浏览器不支持多行隐藏显示省略号

    平时在写页面过程中,相信大家都遇到过文本显示多行后用省略号代替的问题,来看看代码: p{ display: -webkit-box; overflow: hidden; text-overflow: ...

  7. P1004 方格取数——奇怪的dp

    P1004 方格取数 题目描述 设有 \(N\times N\) 的方格图 \((N\leq 20)\),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字 \(0\) .如下图所示(见样例) ...

  8. 华山论剑(没有上司的舞会)——树形dp

    华山论剑(没有上司的舞会) 题目描述 一日,小策如往常一般打开了自己的传奇,刚上线不久,就收到了帮主的私信.原来帮派里要召开一次武功比拼,让他来邀请各帮派人员,因为有些侠客还是萌新,所以需要小策挨个选 ...

  9. Linux下对拍(A+B问题)

    对拍代码 #include<bits/stdc++.h> using namespace std; int main(){ for(int i=1;;i++){ system(" ...

  10. NOI Online #3 提高组 T1水壶 题解

    题目描述 有 n 个容量无穷大的水壶,它们从 1∼n 编号,初始时 i 号水壶中装有 Ai 单位的水. 你可以进行不超过 k 次操作,每次操作需要选择一个满足 1≤x≤n−1 的编号 x,然后把 x ...