//上传图片
$('#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. 如何利用iconfont图标代替小图片

    1.首先 你要有一个阿里巴巴矢量图这个网站的账号:http://www.iconfont.cn/ 在这里注册哦~ 2.蓝后 可以在首页搜索你想要的图标,比如 我想放一个管理员的图标在页面上: 就要点击 ...

  2. web api 过滤器

    /// <summary> /// 渠道过滤器 /// </summary> [AttributeUsage(AttributeTargets.Class | Attribut ...

  3. Java SE之XML<一>XML文档规约

    [文档整理系列] Java SE之XML<一>XML文档规约 1.xml文档引用: 1.外部私有DTD: <!DOCTYPE rootNodeName SYSTEM "ur ...

  4. cpp 常量函数(函数后加const)

    const用在成员函数后 主要是针对类的const 对象 如: class Text{ public:     void printconst(void)const{cout<<" ...

  5. jq中的事件委托:closest,parent,parents,delegate

    closest .closest(selector) 从当前元素开始沿 DOM 树向上,获得匹配第一个符合选择器的祖先元素,返回零个或一个元素的 jQuery 对象. .parents() 和 .cl ...

  6. 【blog】SpringBoot事务

    参考链接 http://www.cnblogs.com/xingzc/p/6029483.html

  7. 谈谈==和equals

    == 先看Java /** * Author:Mr.X * Date:2017/10/8 23:17 * Description: * * @==判断两个内存地址是否相同 * @基础类型有(char, ...

  8. .Net core 使用特性Attribute验证Session登陆状态

    1.新建一个.net core mvc项目 2.在Models文件夹下面添加一个类MyAttribute,专门用来保存我们定义的特性 在这里我只写了CheckLoginAttribute用来验证登陆情 ...

  9. (1)Java数据结构--图文并茂-分析优缺点

    转:常见Java数据结构&优缺点 - /画家/ - 博客园http://www.cnblogs.com/earl-yongchang/p/5639161.html 图片也是引用过来的,没有重新 ...

  10. Struts2学习(三)

    一.值栈 1.OGNL表达式 OGNL的概述:对象图导航语言,是一门功能强大的表达式语言. 2.值栈 值栈的概述(ValueStack):是一个接口,实现类OgnlValueStack.是数据的中转站 ...