//上传图片
$('#files').change(function(e){
var fil = this.files;
var m =0;
if(fil.length>3){
alert('重新选择')
}else{
for (var i = 0; i < fil.length; i++) {

if($('.img_list img').length>=3){
alert('最多只上传三张')
break;
}else{
reads(fil[i]);
}
}
}
})
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function(){
//document.getElementsByClassName("img_list")[0].innerHTML += "<img src='"+reader.result+"'><span></span>";
$('.img_list').append("<img src='"+reader.result+"'><span class='close'></span>")
for(var i=0;i<$('.close').length;i++){
$('.close').click(function(){
console.log($(this).prev())
$(this).prev().remove()
$(this).remove()
})
}
};
};

input file 多张图片上传 获取地址 ——fileReader的更多相关文章

  1. html input file标签的上传文件 注意点

    文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...

  2. input file标签限制上传文件类型

    用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...

  3. jquery input file 多图上传,单张删除,查看

    <div class="form-group"> <label for="imgs" class="col-md-3 col-sm- ...

  4. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  5. IE input file隐藏不能上传文件解决方法

    当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" /> ...

  6. input file multiple 批量上传文件

    这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...

  7. jquery如何获取input(file)控件上传的图片名称,即"11111.jpg"

    html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$( ...

  8. Input File 表单上传按钮美化

    HTML <div class="input-file-button"> 上传图片<input type="file" class=" ...

  9. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

随机推荐

  1. 使用Jackson时转换JSON时,日期格式设置

    在我们使用jackjson时时间默认输出如下: 输出是一串时间戳,不符合我们的要求,所以想到jackjson对时间的处理有他默认的格式,然后网上搜集各种资料,得出一下方式可以解决 取消jackjson ...

  2. luogu 1268 树的重量

    打眼一看就是最小生成树嘛,但经过板子wa掉的经历后得知,,emmmm,原来是, 构造! (虽然不知是什么但觉得听起来很厉害的样子...手动微笑) n=2的情况 自然就是g(1,2) n=3的情况,由于 ...

  3. python基础 range()与np.arange()

    range()返回的是range object,而np.nrange()返回的是numpy.ndarray() range尽可用于迭代,而np.nrange作用远不止于此,它是一个序列,可被当做向量使 ...

  4. 使用Hexo在github上搭建个人博客

    最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新. 如果你有前端开发经验,那么搭建这样的博客就很简单了. 一 什么是Hexo     Hexo 是一个快速.简 ...

  5. 手动写Entity Framework 数据库上下文和Model实体

    1.引用EF对应的程序集 使用命令安装EntityFramework包Install-Package EntityFramework Entity Framework简单目录: 1.context数据 ...

  6. Vue.component注意事项

    Vue.component前不要加 new,否则报错: Uncaught TypeError: Cannot read property '_base' of undefined

  7. cpp #,##

    #define语句中的#是把参数字符串化,##是连接两个参数成为一个整体. #define FACTORY_REF(name) { #name, Make##name } 中#name就是将传入的na ...

  8. scrapy和scrapy_redis入门

    Scarp框架 需求 获取网页的url 下载网页内容(Downloader下载器) 定位元素位置, 获取特定的信息(Spiders 蜘蛛) 存储信息(ItemPipeline, 一条一条从管里走) 队 ...

  9. python---issubclass/type/isinstance/ 反射(内置函数getattr/delattr...)

    # 一 python面向对象-内置函数(issubclass(), type(), isinstance()) # issubclass 判断xxxx类是否是xxxx类的子类 class egg: p ...

  10. MySql cmd下的学习笔记 —— 有关视图的操作(建立表)

    在查询中,我们经常把查询结果当成临时表 view可以看成是一张虚拟表,是表通过某种运算得到的一个投影 在建立视图时,不需要指定视图的列名与列类型 红框内的为select选择语句 蓝框内的与建表语句类似 ...