超简单的jq图片上传
<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图片上传的更多相关文章
- jq 图片上传前预览
html: <div class="form_upload"> <input type="file" id="uploadImg&q ...
- jq 图片上传
1.html <input type="file" class="ImgInput" name="ImgInput"/> 2.j ...
- SpringBoot图片上传(三)——调用文件上传项目的方法(同时启动两个项目)
简单说明:图片上传有一个专门的工程A,提供了图片的上传和下载预览,工程B涉及到图片上传以及回显,都是调用的工程A的方法,言外之意就是要同时启动两个项目. 代码: //工程B的html代码 <di ...
- Retrofit 2.0 超能实践(三),轻松实现文件/多图片上传/Json字符串
文:http://blog.csdn.net/sk719887916/article/details/51755427 Tamic 简书&csdn同步 通过前两篇姿势的入门 Retrofit ...
- 简单2步实现 asp.net mvc ckeditor 图片上传
1.打开ckeditor 包下的 config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...
- 一个简单的安卓+Servlet图片上传例子
例子比较 简单,服务端为Java Web Servlet,doPost方法中接收图片并保存,然后将保存的图片名返回给客户端,关键代码: @SuppressWarnings("deprecat ...
- UEditor之实现配置简单的图片上传示例
UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...
- ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
- jq实现批量图片上传
http://blog.csdn.net/lmj623565791/article/details/31513065 jq实现批量图片上传 http://blog.csdn.net/lmj623565 ...
随机推荐
- shell编程之系统环境变量2
本课程是<Tony老师聊shell——变量>课程的延续,主要介绍Linux shell编程基础中的运算符.包括declare命令.数值运算方法和变量测试.首先在declare命令中介绍了数 ...
- 计算机网络之HTTPS协议
• HTTPS协议是以安全为目的的HTTP通道,比单纯的HTTP协议更安全,相当于HTTP的升级版.• HTTPS的安全基础为SSL,就是在HTTP下加入SSL层,意思是HTTPS通过安全传输机制进行 ...
- pikachu靶场-CSRF
xss和csrf区别: CSRF是借用户的权限完成攻击,攻击者并没有拿到用户的权限,而XSS是直接盗取到了用户的权限,然后实施破坏. PS: 由于之前将php5升级到php7,导致靶场环境出现以下问题 ...
- 豆瓣Top250爬取
第一次做爬虫项目,真的开心,非常顺利爬出了豆瓣Top250的电影 @^_^@ 自从今年6月份就开始自学python,断断续续一直没好好学.直到看了‘’老男孩python3全栈教育‘’,才有所收获.但是 ...
- DOM-BOM-EVENT(4)
4.dom操作 createElement 创建一个元素 <button id="btn">点击</button> <ul id="ul1& ...
- Python-使用tkinter实现的Django服务进程管理工具
import tkinter import subprocess import os import time import re import sys from tkinter import Labe ...
- SpringCloud之zuul
- File and Code Templates IN IDEA
File and Code Templates (文件代码模板) 如何自定义设置头文件的注释,其中包括一些作者和文件创建时间和版本的设置 先打开File->Settings(或Alt+Ctrl+ ...
- Mysql查询语句执行过程
Mysql查询语句执行过程 Mysql分为server层和存储引擎两部分,或许可以再加一层连接层 连接层(器) Mysql使用的是典型的C/S架构.连接器通过典型的TCP握手完成连接. 需要注 ...
- LeetCode题解【题2】:两数相加
原题链接:https://leetcode-cn.com/problems/add-two-numbers/ 查看请另起链接打开. 解题思路执行用时 :2 ms, 在所有 Java 提交中击败了99. ...