<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. mysql错误详解(1819):ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

    O(∩_∩)O哈哈~ 在学习 Mysql 的时候又遇到了新问题了 o(╥﹏╥)o 当我在准备为用户授权的时候: grant all privileges on *.* to 'root'@'%' id ...

  2. 无题II HDU - 2236 【二分图+二分答案】

    题目 这是一个简单的游戏,在一个n*n的矩阵中,找n个数使得这n个数都在不同的行和列里并且要求这n个数中的最大值和最小值的差值最小. Input 输入一个整数T表示T组数据. 对于每组数据第一行输入一 ...

  3. JavaScript学习笔记(1)

    概念: 运行在浏览器端的脚本语言. 构成: ECMAScript(语法) + DOM(文档对象模型) + BOM(浏览器对象模型) 语法: 1.区分大小写 2.变量是弱类型 数据类型: string ...

  4. 遍历form中的所有空间并找到选中的radiobutton

    源文件: http://pan.baidu.com/share/link?shareid=1481950339&uk=3912660076 参考:http://msdn.microsoft.c ...

  5. Python中的错误和异常

    前言 错误是程序中的问题,由于这些问题而导致程序停止执行.另一方面,当某些内部事件发生时,会引发异常,从而改变程序的正常流程. python中会发生两种类型的错误. 语法错误 逻辑错误(异常) 语法错 ...

  6. 一个神奇的SQL语句

    题目是这样的: 分别往这两张表中添加3条数据... 查询营业额最高商家的商品总价与营业额最低商家的商品总价差是多少(5分)CREATE VIEW vm2 AS SELECT price*limit_n ...

  7. Quartz.Net系列(九):Trigger之CronScheduleBuilder和Cron表达式详解

    1.使用 var scheduler =await StdSchedulerFactory.GetDefaultScheduler(); await scheduler.Start(); var jo ...

  8. Linux傻瓜式七步完美安装Python3.7

    1 安装依赖包 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-deve ...

  9. css3常见好看的投影效果_css3阴影box-shadow高大上用法

    在设计图会经常使用到的阴影效果,如何用css3来实现呢?这篇文章主要整理box-shadow的一些好看常用的投影效果. 1.曲面/椭圆投影效果: 代码如下: <style> .shadow ...

  10. 阿里P7岗位面试,面试官问我:为什么HashMap底层树化标准的元素个数是8

    前言 先声明一下,本文有点标题党了,像我这样的菜鸡何德何能去面试阿里的P7岗啊,不过,这确实是阿里p7级岗位的面试题,当然,参加面试的人不是我,而是我部门的一个大佬.他把自己的面试经验分享给了我,也让 ...