input file相关知识简例

在此介绍的input file相关知识为：上传照片及文件，其中包括单次上传、批量上传、删除照片、增加照片、读取图片、对上传的图片或文件的判断，比如限制图片的张数、限制图片的格式、大小等。

在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但特别low、浏览的字样又不能换，但难不倒强迫症患者...看一些其他网站有的将<input type="file" />隐藏，用点击其他的标签（图片等）来时实现选择文件上传功能，也有的将其设为透明，这里推荐后者，详情请参考下面代码。

此为本人写的demo，更人性化的效果实现，供分享，不足之处望提议，将不胜感激

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         .kuang{ 11             display: inline-block;
 12             vertical-align: middle;
 13             box-shadow: inset 0px 1px 20px 5px #ddd;
 14             text-align: left;
 15             margin-right: 20px;
 16             margin-bottom: 20px;
 17             width: 165px;
 18             height: 165px;
 19         }
 20         .addhao{ 21             width: 165px;
 22             height: 165px;
 23             background: url(../img/add_photo_plus.png);
 24         }
 25         .on{ 26             display: inline-block;
 27             text-align: left;
 28             margin-right: 20px;
 29             margin-bottom: 20px;
 30             width: 165px;
 31             height: 165px;
 32             display: none;
 33             position: relative;
 34             overflow: hidden;
 35             line-height: 200px;
 36         }
 37         .xian{ 38             width: 165px;
 39             height: 165px;
 40             position: absolute;
 41             background-image: linear-gradient(
 42                     0deg,
 43                     rgba(0,0,0,0.7) 50%,
 44                     transparent 50%
 45             );
 46             background-size: 165px 4px;
 47             display: none;
 48             z-index: 2;
 49         }
 50         .chahao{ 51             position: absolute;
 52             width: 60px;
 53             height: 60px;
 54             background: url(../img/ico_02.png);
 55             background-position: -171px -158px;
 56             top: 52.5px;
 57             left: 52.5px;
 58             display: none;
 59             z-index: 2;
 60         }
 61         .on img{ 62             width: 100%;
 63             height: auto;
 64             position: absolute;
 65             left: 0;
 66             right: 0;
 67             top: 0;
 68             bottom: 0;
 69             margin:auto;
 70         }
 71         .kuang input{ 72             width: 164px;
 73             height: 164px;
 74             opacity: 0;
 75         }
 76         .button{ 77             width: 500px;
 78             height: 36px;
 79             margin: 0 auto;
 80
 81         }
 82         .button .set{ 83             float: left;
 84             width: 216px;
 85             height: 36px;
 86             background: #ddd;
 87             text-align: center;
 88             position: relative;
 89         }
 90         .set input{ 91             width: 216px;
 92             height: 36px;
 93             opacity: 0;
 94             position: absolute;
 95             top: 0;
 96             left: 0;
 97         }
 98         .button .next{ 99             float: right;
100             width: 216px;
101             height: 36px;
102             background: red;
103             color: white;
104         }
105         .bigk{106             width: 1000px;
107             margin: 0 auto;
108             text-align: center;
109         }
110     </style>
111     <script src="branches/jquery-3.1.1.min.js"></script>
112 </head>
113 <body>
114 <div class="bigk">
115         <div class="kuang">
116             <div class="addhao">
117                 <input type="file" name="" class="fileinput">
118             </div>
119             <div class="on">
120                 <div class="xian"></div>
121                 <div class="chahao"></div>
122             </div>
123         </div>
124         <div class="kuang">
125             <div class="addhao">
126                 <input type="file" name="" class="fileinput">
127             </div>
128             <div class="on">
129                 <div class="xian"></div>
130                 <div class="chahao"></div>
131             </div>
132         </div>
133         <div class="kuang">
134             <div class="addhao">
135                 <input type="file" name="" class="fileinput">
136             </div>
137             <div class="on">
138                 <div class="xian"></div>
139                 <div class="chahao"></div>
140             </div>
141         </div>
142         <h3>上传n张照片，生成属于你的相册</h3>
143         <p><span style="color:red;">限制条件：可自行增减设置；</span>如：支持jpg/png/jpeg格式，单张照片不大于20M，单次上传不多于n张，请尽量上传横板照片</p>
144         <img src="../img/line_03.png" alt="">
145         <div class="button" >
146             <a href=""><div class="set">批量上传<input type="file" name="" multiple="multiple" id="piliang"></div></a>
147             <a href="#" class="next">限制张数</a>
148         </div>
149     </div>
150 </div>
151 </div>
152 <script>
153 // 单张上传照片  删除照片
154 $(" .fileinput").change(function () {
155      var file = this.files[0];
156      readFile(file,$(this).parent().siblings(".on"));
157 });
158 $(".on").mouseover(function () {
159      $(this).children(".xian").show();
160      $(this).children(".chahao").show();
161
162 });
163 $(".on").mouseleave(function () {
164      $(this).children(".xian").hide();
165      $(this).children(".chahao").hide();
166 });
167 $(".chahao").click(function () {
168      $(this).next().remove();
169      $(".xian").hide();
170      $(".chahao").hide();
171      $(this).parent().hide();
172      $(this).parent().siblings(".addhao").show();
173      $(this).parent().siblings(".addhao").children().val("");
174
175 });
176 var on =document.querySelector(".on");
177 //    需要把阅读的文件传进来file element是把读取到的内容放入的容器
178 function readFile(file,element) {
179 //        新建阅读器
180 var reader = new FileReader();
181 //        根据文件类型选择阅读方式
182 switch (file.type){
183 case 'image/jpg':
184 case 'image/png':
185 case 'image/jpeg':
186 case 'image/gif':
187 reader.readAsDataURL(file);
188 break;
189 }
190 //        当文件阅读结束后执行的方法
191 reader.addEventListener('load',function () {
192 //         如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
193 switch (file.type){
194     case 'image/jpg':
195     case 'image/png':
196     case 'image/jpeg':
197     case 'image/gif':
198     var img = document.createElement('img');
199     img.src = reader.result;
200     element.append(img);
201     element.siblings(".addhao").hide();
202     element.show();
203     break;
204    }
205   });
206 }
207 // 批量上传部分
208 var piliang = document.querySelector('#piliang');
209 var on = $(".on");
210 piliang.addEventListener('change',function () {
211 for (var i = 0;i < this.files.length;i++){
212 var file = this.files[i];
213 on.eq(i).children(".chahao").next().remove();
214 readFile(file,on.eq(i));
215 }
216 });
217 //
218 var on = $(".on");
219 $(".next").click(function () {
220    for (var i = 0; i < 10; i++) {
221    console.log(on[i].childNodes.length);
222    if (on[i].childNodes.length==6){
223 //这个判断就是说明里面有多少个孩子，孩子不够数，不会生成相册
224       }else{
225           alert("上传照片不足3张");
226           $(".next").attr("href","javascript:void(0)");
227            return
228            }
229      $(".next").attr("href","生成相册.html");
230    }
231 });
232 </script>
233 </body>
234 </html>

初始效果图如下

点击+号进行添加图片效果图如下

点击+号添加完成单次上传图片效果图如下

点击批量进行上传效果图如下：

删除上传照片效果图如下

当没有满足js中的设置要求，将不能提交

解析：

选择文件：input：file 选择本地文件，默认为单选，多选为multiple；

读取文件：需要阅读器新建reader；

有关js这里用的是jq，在用此方法前，请将jq链接到页面；

转载于:https://www.cnblogs.com/gengaiwei/p/6241749.html

HTML中上传与读取图片或文件（input file）----在路上（25）相关推荐

ASP.NET中上传并读取Excel文件数据,附后生成EXCEL及杀掉EXCEL进程。
本文通过一个简单的例子,实现读取Excel数据文件. 首先,创建一个Web应用程序项目,在Web页中添加一个DataGrid控件.一个文件控件和一个按钮控件. <INPUT id="F ...
ashx获取input file 文件_通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
angular文件上传php,Angular2里获取（input file）上传文件的内容的方法
最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签. 然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后 ...
[导入]ASP.NET中上传并读取Excel文件数据
首先,创建一个Web应用程序项目,在Web页中添加一个DataGrid控件.一个文件控件和一个按钮控件. <INPUT id="File1" type="file& ...
java图片和视频上传_java实现上传和读取图片（视频）
0 背景实现从前端上传图片(或视频),后端保存在指定目录下:再从前端读取文件,进行显示. 1 上传代码实现 1.1 html 1.2 ts // 上传附件 handleChange(info: { ...
通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求
<script type="text/jscript">$(function () {$("#btn_uploadimg").click(funct ...
html 微信无法获取图片,微信浏览器input file 图片选择问题，获取不到图片的type等信息...
求教一下各位大神,在微信公众号页面出现的问题,通过点击获取一张图片用于上传时,从'图库'里面获取的图片各个参数(file.type,file.name等)都正常,file.type为image/png ...
input file限制上传文件类型的方法
在前端html中,上传文件时,一般都是用到 type 属性值为 file 的 input 标签,但在默认情况下,file 类型的 input 标签是不限制选择本地文件的类型的. input file ...
ssm+layui实现图片的上传与读取
ssm+layui实现图片的上传与读取图片上传确实是一个项目比较核心的技术,我的项目并没有用到传统的富文本上传,而是将图片先热部署到tomcat,在上存储到数据库,读取的时候同样使用此方法. 图片上 ...

HTML中上传与读取图片或文件（input file）----在路上（25）

input file相关知识简例

HTML中上传与读取图片或文件（input file）----在路上（25）相关推荐

最新文章

热门文章