input file相关知识简例

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

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

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         .kuang{

             display: inline-block;

             vertical-align: middle;

             box-shadow: inset 0px 1px 20px 5px #ddd;

             text-align: left;

             margin-right: 20px;

             margin-bottom: 20px;

             width: 165px;

             height: 165px;

         }

         .addhao{

             width: 165px;

             height: 165px;

             background: url(../img/add_photo_plus.png);

         }

         .on{

             display: inline-block;

             text-align: left;

             margin-right: 20px;

             margin-bottom: 20px;

             width: 165px;

             height: 165px;

             display: none;

             position: relative;

             overflow: hidden;

             line-height: 200px;

         }

         .xian{

             width: 165px;

             height: 165px;

             position: absolute;

             background-image: linear-gradient(

                     0deg,

                     rgba(0,0,0,0.7) 50%,

                     transparent 50%

             );

             background-size: 165px 4px;

             display: none;

             z-index: 2;

         }

         .chahao{

             position: absolute;

             width: 60px;

             height: 60px;

             background: url(../img/ico_02.png);

             background-position: -171px -158px;

             top: 52.5px;

             left: 52.5px;

             display: none;

             z-index: 2;

         }

         .on img{

             width: 100%;

             height: auto;

             position: absolute;

             left: 0;

             right: 0;

             top: 0;

             bottom: 0;

             margin:auto;

         }

         .kuang input{

             width: 164px;

             height: 164px;

             opacity: 0;

         }

         .button{

             width: 500px;

             height: 36px;

             margin: 0 auto;

         }

         .button .set{

             float: left;

             width: 216px;

             height: 36px;

             background: #ddd;

             text-align: center;

             position: relative;

         }

         .set input{

             width: 216px;

             height: 36px;

             opacity: 0;

             position: absolute;

             top: 0;

             left: 0;

         }

         .button .next{

             float: right;

             width: 216px;

             height: 36px;

             background: red;

             color: white;

         }

         .bigk{

             width: 1000px;

             margin: 0 auto;

             text-align: center;

         }

     </style>

     <script src="branches/jquery-3.1.1.min.js"></script>

 </head>

 <body>

 <div class="bigk">

         <div class="kuang">

             <div class="addhao">

                 <input type="file" name="" class="fileinput">

             </div>

             <div class="on">

                 <div class="xian"></div>

                 <div class="chahao"></div>

             </div>

         </div>

         <div class="kuang">

             <div class="addhao">

                 <input type="file" name="" class="fileinput">

             </div>

             <div class="on">

                 <div class="xian"></div>

                 <div class="chahao"></div>

             </div>

         </div>

         <div class="kuang">

             <div class="addhao">

                 <input type="file" name="" class="fileinput">

             </div>

             <div class="on">

                 <div class="xian"></div>

                 <div class="chahao"></div>

             </div>

         </div>

         <h3>上传n张照片，生成属于你的相册</h3>

         <p><span style="color:red;">限制条件：可自行增减设置；</span>如：支持jpg/png/jpeg格式，单张照片不大于20M，单次上传不多于n张，请尽量上传横板照片</p>

         <img src="../img/line_03.png" alt="">

         <div class="button" >

             <a href=""><div class="set">批量上传<input type="file" name="" multiple="multiple" id="piliang"></div></a>

             <a href="#" class="next">限制张数</a>

         </div>

     </div>

 </div>

 </div>

 <script>

 // 单张上传照片  删除照片

 $(" .fileinput").change(function () {

      var file = this.files[0];

      readFile(file,$(this).parent().siblings(".on"));

 });

 $(".on").mouseover(function () {

      $(this).children(".xian").show();

      $(this).children(".chahao").show();

 });

 $(".on").mouseleave(function () {

      $(this).children(".xian").hide();

      $(this).children(".chahao").hide();

 });

 $(".chahao").click(function () {

      $(this).next().remove();

      $(".xian").hide();

      $(".chahao").hide();

      $(this).parent().hide();

      $(this).parent().siblings(".addhao").show();

      $(this).parent().siblings(".addhao").children().val("");

 });

 var on =document.querySelector(".on");

 //    需要把阅读的文件传进来file element是把读取到的内容放入的容器

 function readFile(file,element) {

 //        新建阅读器

 var reader = new FileReader();

 //        根据文件类型选择阅读方式

 switch (file.type){

 case 'image/jpg':

 case 'image/png':

 case 'image/jpeg':

 case 'image/gif':

 reader.readAsDataURL(file);

 break;

 }

 //        当文件阅读结束后执行的方法

 reader.addEventListener('load',function () {

 //         如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签

 switch (file.type){

     case 'image/jpg':

     case 'image/png':

     case 'image/jpeg':

     case 'image/gif':

     var img = document.createElement('img');

     img.src = reader.result;

     element.append(img);

     element.siblings(".addhao").hide();

     element.show();

     break;

    }

   });

 }

 // 批量上传部分

 var piliang = document.querySelector('#piliang');

 var on = $(".on");

 piliang.addEventListener('change',function () {

 for (var i = 0;i < this.files.length;i++){

 var file = this.files[i];

 on.eq(i).children(".chahao").next().remove();

 readFile(file,on.eq(i));

 }

 });

 //

 var on = $(".on");

 $(".next").click(function () {

    for (var i = 0; i < 10; i++) {

    console.log(on[i].childNodes.length);

    if (on[i].childNodes.length==6){

 //这个判断就是说明里面有多少个孩子，孩子不够数，不会生成相册

       }else{

           alert("上传照片不足3张");

           $(".next").attr("href","javascript:void(0)");

            return

            }

      $(".next").attr("href","生成相册.html");

    }

 });

 </script>

 </body>

 </html>

初始效果图如下

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

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

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

删除上传照片效果图如下

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

解析：

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

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

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

HTML中上传与读取图片或文件（input file）----在路上（25）的更多相关文章

  1. ASP.NET中上传并读取Excel文件数据

    在CSDN中,经常有人问如何打开Excel数据库文件.本文通过一个简单的例子,实现读取Excel数据文件. 首先,创建一个Web应用程序项目,在Web页中添加一个DataGrid控件.一个文件控件和一 ...

  2. 前端上传视频、图片、文件等大文件 组件Plupload使用指南

    demo:https://blog.csdn.net/qq_30100043/article/details/78491993 Plupload上传插件中文帮助文档网址:http://www.phpi ...

  3. jquery即时获取上传文件input file文件名

    截图:   代码: <input type="file" id="choosefile" style="display:none"/& ...

  4. 通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求

    <script type="text/jscript"> $(function () { $("#btn_uploadimg").click(fun ...

  5. 上传文件 input file

    //-----前端文件------- form id="uploadForm" enctype="multipart/form-data"> <in ...

  6. Servlet+Jsp实现图片或文件的上传功能

    首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在WebR ...

  7. java的poi技术下载Excel模板上传Excel读取Excel中内容（SSM框架）

    使用到的jar包 JSP: client.jsp <%@ page language="java" contentType="text/html; charset= ...

  8. Android文件（File）操作

    Android 使用与其他平台上基于磁盘的文件系统类似的文件系统. 本文讲述如何使用 Android 文件系统通过 File API 读取和写入文件. File 对象适合按照从开始到结束的顺序不跳过地 ...

  9. 【转】Android必备知识点- Android文件（File）操作

    Android 使用与其他平台上基于磁盘的文件系统类似的文件系统. 本文讲述如何使用 Android 文件系统通过 File API 读取和写入文件. File 对象适合按照从开始到结束的顺序不跳过地 ...

随机推荐

  1. Windows 7上执行Cake 报错原因是Powershell 版本问题

    在Windows 7 SP1 电脑上执行Cake的的例子 http://cakebuild.net/docs/tutorials/getting-started ,运行./Build.ps1 报下面的 ...

  2. js复杂对象和简单对象的简单转化

    var course = { teacher :{ teacherId:001, teacherName:"王" }, course : { courseId : 120, cou ...

  3. [转]利用URLConnection来发送POST和GET请求

    URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...

  4. Paypal开发中遇到请求被中止: 未能创建 SSL/TLS 安全通道及解决方案

    最近在基于ASP.NET上开发了Paypal支付平台,在ASP.NET开发的过程中没有遇到这个问题,但是引用到MVC开发模式中的时候就出现了"未能创建 SSL/TLS 安全通道及解决方案&q ...

  5. 在jekyll模板博客中添加网易云模块

    最近使用GitHub Pages + Jekyll 搭建了个人博客,作为一名重度音乐患者,博客里面可以不配图,但是不能不配音乐啊. 遂在博客里面引入了网易云模块,这里要感谢网易云的分享机制,对开发者非 ...

  6. 当web.config文件放置在共享目录下（UNC），启动IIS会提示有错误信息500.19，伴随有错误代码0x80070003和错误代码0x80070005的解决办法

    最近遇到一个很有意思的使用环境,操作人员将所有的网站应用内容投放到共享存储里面,并且使用微软的SMB协议将其以CIFS的方式共享出来,使用Windows Server 2008 R2的IIS将其连接起 ...

  7. jdb调试scala代码的简单介绍

    在linux调试C/C++的代码需要通过gdb,调试java代码呢?那就需要用到jdb工具了.关于jdb的用法在网上大家都可以找到相应的文章,但是对scala进行调试的就比较少了.其实调试的大致流程都 ...

  8. C#使用Aspose.Cells导出Excel简单实现

    首先,需要添加引用Aspose.Cells.dll,官网下载地址:http://downloads.aspose.com/cells/net 将DataTable导出Xlsx格式的文件下载(网页输出) ...

  9. Unable to create the selected property page. An error occurred while automatically activating bundle net.sourceforge.pmd

    解决方案: 在命令行到eclipse目录下使用 eclipse.exe -clean

  10. Android中Fragment和ViewPager那点事儿（仿微信APP）

    在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...