<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. jmeter在non-GUI模式下用法

    用法 jmeter -n -t HTTPRequesttest.jmx -l testHistory/testResult.jtl -e -o testHistory/testReport 参数说明 ...

  2. DOM-BOM-EVENT(3)

    3.Node常用属性 childNodes 获取所有子节点 <div id="wrap"> <div>1111</div> <div> ...

  3. nginx 注释配置及详解

    前言 DMZ(Demilitarized Zone) 非军事区,生产环境 WEB 服务部署的区域,公司的架构为一台nginx 充当 load balance 服务,负载到两台 nginx 上面,反向代 ...

  4. JS中字符串和数组的相互转化

    题目:利用var s1=prompt("请输入任意的字符串:") ,可以获取用户输入的字符串,试编程将用户输入的字符串“反转”,并且将字符串输出. 思路:字符串对象的方法中并没有实 ...

  5. C++ ACE 动态加载链接库

    添加头文件 #include <ace/DLL.h> #include <ace/DLL_Manager.h> 定义函数接口 typedef long (*PFN_TEST)( ...

  6. a标签绑定点击事件失败

    如图 然后对a标签绑定点击事件  无效 换成span标签可以

  7. 《The Design of a Practical System for Fault-Tolerant Virtual Machines》论文总结

    VM-FT 论文总结 说明:本文为论文 <The Design of a Practical System for Fault-Tolerant Virtual Machines> 的个人 ...

  8. 转载------一小时包教会 —— webpack 入门指南

    本文写的蛮好,转载地址:http://www.w2bc.com/Article/50764 其他的地址: http://webpack.github.io/docs/usage-with-gulp.h ...

  9. Python Java 快速配置环境变量(Path)

    Python Java 快速配置环境变量(Path) 最近系统被重置,清空了C盘中的program等文件夹以及初始化了环境变量. 通常环境下,在windows环境中我们都会打开"环境变量&q ...

  10. 一口气说出 OAuth2.0 的四种鉴权方式,面试官会高看一眼

    本文收录在个人博客:www.chengxy-nds.top,技术资源共享,一起进步 上周我的自研开源项目开始破土动工了,<开源项目迈出第一步,10 选 1?页面模板成了第一个绊脚石 > , ...