<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. shell编程之系统环境变量2

    本课程是<Tony老师聊shell——变量>课程的延续,主要介绍Linux shell编程基础中的运算符.包括declare命令.数值运算方法和变量测试.首先在declare命令中介绍了数 ...

  2. 计算机网络之HTTPS协议

    • HTTPS协议是以安全为目的的HTTP通道,比单纯的HTTP协议更安全,相当于HTTP的升级版.• HTTPS的安全基础为SSL,就是在HTTP下加入SSL层,意思是HTTPS通过安全传输机制进行 ...

  3. pikachu靶场-CSRF

    xss和csrf区别: CSRF是借用户的权限完成攻击,攻击者并没有拿到用户的权限,而XSS是直接盗取到了用户的权限,然后实施破坏. PS: 由于之前将php5升级到php7,导致靶场环境出现以下问题 ...

  4. 豆瓣Top250爬取

    第一次做爬虫项目,真的开心,非常顺利爬出了豆瓣Top250的电影 @^_^@ 自从今年6月份就开始自学python,断断续续一直没好好学.直到看了‘’老男孩python3全栈教育‘’,才有所收获.但是 ...

  5. DOM-BOM-EVENT(4)

    4.dom操作 createElement 创建一个元素 <button id="btn">点击</button> <ul id="ul1& ...

  6. Python-使用tkinter实现的Django服务进程管理工具

    import tkinter import subprocess import os import time import re import sys from tkinter import Labe ...

  7. SpringCloud之zuul

  8. File and Code Templates IN IDEA

    File and Code Templates (文件代码模板) 如何自定义设置头文件的注释,其中包括一些作者和文件创建时间和版本的设置 先打开File->Settings(或Alt+Ctrl+ ...

  9. Mysql查询语句执行过程

    Mysql查询语句执行过程   Mysql分为server层和存储引擎两部分,或许可以再加一层连接层   连接层(器) Mysql使用的是典型的C/S架构.连接器通过典型的TCP握手完成连接. 需要注 ...

  10. LeetCode题解【题2】:两数相加

    原题链接:https://leetcode-cn.com/problems/add-two-numbers/ 查看请另起链接打开. 解题思路执行用时 :2 ms, 在所有 Java 提交中击败了99. ...