input file 多张图片上传 获取地址 ——fileReader
//上传图片
$('#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的更多相关文章
- html input file标签的上传文件 注意点
文件上传框 代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...
- input file标签限制上传文件类型
用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...
- jquery input file 多图上传,单张删除,查看
<div class="form-group"> <label for="imgs" class="col-md-3 col-sm- ...
- 动态input file多文件上传到后台没反应的解决方法!!!
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...
- IE input file隐藏不能上传文件解决方法
当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" /> ...
- input file multiple 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
- jquery如何获取input(file)控件上传的图片名称,即"11111.jpg"
html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$( ...
- Input File 表单上传按钮美化
HTML <div class="input-file-button"> 上传图片<input type="file" class=" ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
随机推荐
- daemon_inetd函数
#include <syslog.h> extern int daemon_proc; /* defined in error.c */ void daemon_inetd(const c ...
- [译]使用mediatR的notification来扩展的的应用
原文 你不希望在controller里面出现任何领域知识 开发者经常有这样的疑问"这个代码应该放在哪呢?"应该使用仓储还是query类?.... 怎么去实现职责分离和单一职责呢? ...
- 【bzoj 2527】[Poi2011]Meteors
Description Byteotian Interstellar Union (BIU) has recently discovered a new planet in a nearby gala ...
- c# cbo控件
c# cbo控件 ,要获取选中的值 最好使用 ((强转的类型)selectitem).属性
- [C++]PAT乙级1010. 一元多项式求导 (25/25)
/* 1010. 一元多项式求导 (25) 设计函数求一元多项式的导数.(注:x^n(n为整数)的一阶导数为n*x^n-1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1 ...
- 第26月第29天 ffmpeg yasm
1. brew install automake fdk-aac git lame libass libtool libvorbis libvpx \ opus sdl shtool texi2htm ...
- LAS(Listener、Attender、Speller)端到端构架
基于注意力(Attention)机制的端到端系统,又被称为LAS端到端构架. [6] W. Chan, N. Jaitly, Q. Le, O. Vinyals. Listen, Attend and ...
- python购物车作业
# -*- coding:utf8 -*- # Author:Wang Yao goods = [{"name": "电脑", "price" ...
- vue学习之template标签
HTML5提供的新标签,具有以下特性: 1.该元素天生display:none,同时模板元素内部内容也是隐藏的 2.位置任意,可以在<head>中,也可以在<body>或者&l ...
- C++ 类使用多线程技术
参考文章 : http://blog.csdn.net/jmh1996/article/details/72235232 成员函数作为线程函数, 要将成员函数定义为静态的 C++ 静态成员函数调用非 ...