File随想——初识file控件

by admin on 2019年10月8日

File杂谈——初识file控件

2015/07/23 · HTML5 ·
file控件

原文出处: 百码山庄   

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的<input type=”file”> 。如果你不是想寻找这方面的东西,就可以绕道了。

  我们通常使用<input
type=’file’/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件。

File类基础,file类

File类的作用:
Java的io包中定义了File类,用于对文件或文件夹的管理操作。
File类只能够用于表示文件或文件夹的信息(属性)和对该文件或文件夹的删除创建操作
(不能对内容进行访问)
通过创建File类对象可以用程序来操作电脑上的文件或文件夹。

 

File类的构造方法:
File(String
path):通过指定的路径名字符串来创建一个新的File对象,抽象路径名是用来表示某个文件或文件夹的路径定位。
File(File parent,String
path):根据parent父文件对象和path子文件名字符串来创建一个新的File对象。

 

File类的常用API
威尼斯国际娱乐,文件操作:
exists():判断文件是否存在:返回值为布尔值
getCanonicalPath() :获取当前文件的标准路径名 
separator:用于表示路径层级分割符,可以避免不同操作系统的分割符不一致的情况
createNewFile():在硬盘中创建一个文件
length():长度
lastModified():创建时间:new Date(File.lastModified())
delete():删除
getName():获得文件或文件夹名

文件夹操作:
exists():判断文件是否存在:返回值为布尔值
getCanonicalPath()  :获取当前文件的标准路径名 
separator:用于表示路径层级分割符,可以避免不同操作系统的分割符不一致的情况
boolean mkdir():创建文件夹
mkdirs():如果父文件夹不存在就一起创建
listFiles():该方法返回的路径名用于表示此抽象路径名的目录中的文件和目录的数组
listFiles(FileFilter filter)
:该方法返回的路径名用于表示此抽象路径名的目录中的文件和目录的数组,并且带有FileFilter类型的过滤器
isDirectory():判断是否文件夹
delDirectory(pp):调用删除文件夹方法

 1 public void testFile01() throws IOException{
 2         //在计算机内存中创建一个File对象,用来对应计算机的存储硬盘中的当前文件夹
 3         File file = new File(".");
 4         System.out.println("当前文件夹是否存在:"+file.exists());
 5         System.out.println("查看当前文件夹的路径位置:"+file.getCanonicalPath());
 6         //与硬盘中是否存在文件夹没有直接联系,只是存在JVM中的对象
 7         File fileDemo = new File(file,"fileDemo");
 8         System.out.println("查看当前文件夹中是否存在fileDemo文件夹:"+fileDemo.exists());
 9         if(!fileDemo.exists()){
10             fileDemo.mkdir();//创建出fileDemo文件夹  
11         }
12         
13                 File testFile = new  File(file,"aa"+File.separator+"testFile");
14         if(!testFile.exists()){
15 //            boolean flag = testFile.mkdir();
16 //            System.out.println("创建结果:"+flag);
17             testFile.mkdirs();//创建文件夹,当父目录不存在会把父目录先创建出来
18         }
19         
20         File aFile = new File(fileDemo,"a.txt");
21         System.out.println("a.txt在硬盘中是否存在:"+aFile.exists());
22         if(!aFile.exists()){
23             aFile.createNewFile();//在硬盘中创建一个文件
24         }
25         System.out.println("a.txt在硬盘中是否存在:"+aFile.exists());
26         System.out.println("a.txt的标准路径为:"+aFile.getCanonicalPath());
27         System.out.println("a.txt的文件长度为:"+aFile.length());
28         System.out.println("a.txt的创建时间:"+new Date(aFile.lastModified()));
29         /*
30          * 删除文件对象表示的文件或文件夹,成功删除返回true。
31          * 如果文件对象表示的是一个文件夹,删除的时候必须保证此文件夹是空文件夹才能删除
32          */
33         aFile.delete();
34         //删除aa会失败
35         File aa = new File(file,"aa");
36         aa.delete();
37     }

public void testFile02(){
        File file = new File(".");//当前文件夹对象
        File[] files = null;
        if(file.exists()){
            //listFiles():查看当前文件夹下有什么子文件或子文件夹,如果文件夹路径为空,返回空
            //如果此路径名不是表示一个文件夹或者发生了I/O异常,也返回null
             files = file.listFiles();
        }
        for(File f:files){
            //getName():获得文件或文件夹名
            System.out.println(f.getName());
        }
    }

    public void testFile03() throws IOException{
        File path = new File(".");
        File pppp = new File(path,"pp"+File.separator+"ppp"+File.separator+"pppp");
        File demoFile = new File(pppp,"demo.txt");
        if(!pppp.exists()){
            pppp.mkdirs();//将父文件夹与子文件夹一起创建
        }
        if(!demoFile.exists()){
            demoFile.createNewFile();//创建文件
        }
        File pp = new File(path,"pp");
        delDirectory(pp);//调用删除文件夹方法下面没有文件则可以成功
    }

//使用遍历方法删除文件夹,如果内部有文件则删除文件,防止无法删除文件夹
    public static void delDirectory(File dir) throws IOException{
        if(!dir.exists()){//如果文件夹不存在,抛出运行时异常
            throw new RuntimeException("文件夹"+dir+"不存在");
        }
        if(!dir.isDirectory()){//判断是否文件夹
            throw new RuntimeException(dir+"不是目录");
        }
        File[] subs = dir.listFiles();
        if(subs!=null&&subs.length>0){//遍历所有子文件和文件夹,删除里面内容
            //遍历所有的subs
            for(File f:subs){
                if(!f.isDirectory()){//不是文件夹就是文件
                    System.out.println("文件名为:"+f.getName());
                    if(!f.delete()){//如果删除失败则抛出异常,如果成功则不进来,文件也删掉了
                        throw new IOException("无法删除文件"+f.getName());
                    }
                }else{//文件夹处理
                    System.out.println("开始处理文件夹"+f.getName());
                    delDirectory(f);//调用删除文件夹方法,删除子文件夹
                    System.out.println("子文件夹已经删除,开始删除该文件夹"+f.getName());
                    f.delete();//删除完子文件和子文件夹后,需要删除当前的文件夹
                }
            }
        }
        dir.delete();//删除dir目录的内容
    }

    //使用过滤器过滤掉一部分文件,处理符合规则的文件
    public void testFile04(){
        File file = new File("src"+File.separator+"day07");//创建文件对象
        FileFilter filter = new FileFilter(){
            //该方法用于定义过滤规则,如果return true则表示符合规则的
            //返回值为false  则表示不符合规则的
            @Override
            public boolean accept(File pathname) {
                //matches匹配符合正则表达式规则的内容
                if(pathname.getName().matches(".*[.]java")){
                    return true;
                }
                return false;
            }
        };
        //传入过滤器对象,过滤掉不符合规则的file对象
        File[] paths = file.listFiles(filter);
        for(File f:paths){
            System.out.println(f.getName());
        }
    }

 

File类的作用:
Java的io包中定义了File类,用于对文件或文件夹的管理操作。
File类只能够用于表示文件或文件夹的信息(属…

1、创建文件夹

(1)学习自定义首先先了解自定义控件的作用以及为什么用到自定义控件

                   
自定义控件是在现有的控件不满足项目需要,并且需要大量使用同一排版格式的时候所制定的控件,说白了就是满足项目的需要。

功能

当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了。HTML文档中每添加一个 <input type=”file”> ,实际就是创建了一个FileUpload实例对象。用户可以通过点击file控件选择本地文件,当我们提交包含该file控件的表单时,浏览器会向服务器发送用户选中的本地文件。从而将本地文件传输到服务器,供其他网络用户下载或使用,实现文件上传功能。

  看上面的描述,file控件貌似挺强大的,事实上也是这样的。但实际开发中我们也可以挑出file控件的诸多问题:

 

 (2) 自定义控件的继承类

        Control
类实现向用户显示信息的类所需的最基本功能。它处理用户通过键盘和指针设备所进行的输入。它还处理消息路由和安全。虽然它并不实现绘制,但是它定义控件的边界(其位置和大小)。它提供窗口句柄–引用

       这里我主要说的是 Control的继承使用

美中不足

无可厚非,file控件很强大,给网页上传文件带来了极大的便利。但是,它并非完美!

首先,从控件本身而言,我们可以通过value属性获取到用户选择的文件名称,但出于安全性等因素考虑,该属性无法指定默认值,并且该属性为只读属性。

其次,恐怕也是file控件令很多开发者头疼的地方。file控件在各个主流浏览器之间的表现大有差异,给用户带来的视觉感受大相径庭,而且几乎不可能通过直接修改样式来达到统一,下面我用一张图来更清晰的告诉大家:

威尼斯国际娱乐 1

一目了然了吧?更可恶的是“选择文件”、“Browse…”、“浏览…”三处文字均无法更改!!然而,这仅仅是视觉上的差异,不同浏览器下file控件的行为也存在一些差异:

  • A1、A2、A3、A4、A6,五处我们均可以单击触发文件选择
  • A5 处我们却需要双击才能触发文件选择

总之,file控件从默认视觉效果和交互体验方面来讲,是开发人员和普通用户都很难接受的。

  1、我们可以通过value属性获取用户选择的文件的名称,但出于安全因素,该属性只读,所以也就无法指定默认值。

File file_1 = new File(File.separator + “mnt” + File.separator +
“sdcard” + File.separator);

一(实现我们第一个简单的控件)

    大家请先看效果图

   威尼斯国际娱乐 2

道高一尺,魔高一丈

既然默认的东西我们都不能接受,那么不能接受的东西我们就要去改变它。

经过无数开发者的不断实践证明,我们不能通过改变宽度,高度,来控制file控件中按钮的尺寸,但是我们可以通过设置file控件的字体大小(font-size)来改变这个按钮的尺寸,更令人可观的是主流浏览器对改变font-size的表现是一致的。

那么,聪明的开发者们就有了应对之策了。

首先,我们从前面表现差异描述中可以发现A2、A4、A6,三处均可单击触发文件选择文件,并且这三处还有一个共同点——它们均处于控件右侧,那么我们就可以改变控件字体大小,让右侧这一部分足够大,并且只让用户看见这一区域(或部分),并且只让用户操作该区域,那么A5处交互效果不一致的问题就可以解决了。为了达到这个目的,我们可以在file控件外面包裹一层容器,并设置尺寸,通过定位将file控件右边区域显示到目标区域,并为容器设置溢出隐藏( overflow: hidden )。我还是用代码来说明吧:

XHTML

<style> .file-group { position: relative; width: 200px; height:
80px; border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
overflow: hidden; } .file-group input { position: absolute; right: 0;
top: 0; font-size: 300px; } </style> <div
class=”file-group”> <input type=”file” name=”” id=”J_File”>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
</div>

在浏览器中查看上面代码的效果,显然Chrome、Firefox、IE下显示效果明显太不一样了(其实文字被放大挤出可见区域了,几乎啥都看不到),那么怎么应对呢?所谓“道高一尺,魔高一丈”,这里简单的原理就是让file控件处于较高的层(z-index),并且设置透明(opacity,低版本IE用filter),让后面的元素来设置样式,以此达到视觉风格统一。说得不是很明白,还是直接上代码吧:

XHTML

<style> .file-group { position: relative; width: 200px; height:
80px; border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
overflow: hidden; cursor: pointer; line-height: 80px; font-size: 16px;
text-align: center; color: #fff; background-color: #f50;
border-radius: 4px; } .file-group input { position: absolute; right: 0;
top: 0; font-size: 300px; opacity: 0; filter: alpha(opacity=0); cursor:
pointer; } .file-group:hover { background-color: #f60; } </style>
<div class=”file-group”> <input type=”file” name=””
id=”J_File”> 选择文件 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
        cursor: pointer;
        line-height: 80px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #f50;
        border-radius: 4px;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .file-group:hover {
        background-color: #f60;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
    选择文件
</div>

最后我们再看下各浏览器表现一致的最终显示效果及交互体验:

威尼斯国际娱乐 3

OK,到这里我们算是对file控件有个简单的认识了,后面我还会提供更多file控件或根据file控件延伸出去的相关资料,有兴趣的朋友可以持续关注。

1 赞 3 收藏
评论

威尼斯国际娱乐 4

  2、最让我们诟病的是,file控件在不同浏览器上长相迥异。这让我们开发者情何以堪?而且“选择文件”、“浏览…”等字样均无法修改。更可恶的是IE9中file控件类似于输入框的位置需要双击才能触发文件选择。这样的视觉效果与交互体验着实让我们无法接受。

 

(1)首先我们需要创建一个类库  这里我们需要注意的是您所创建的类库或者所您所引用的,不能和您现有项目中的类文件重名 否者将会编译不通过

威尼斯国际娱乐 5

 

下面是我们需要写入的代码

威尼斯国际娱乐 6威尼斯国际娱乐 7

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyCustomControls.MycustomControls
{
    /// <summary>
    /// 添加类文件 继承Control类
    /// </summary>
    public class MyFirstControls : Control
    {
        protected override void Render(HtmlTextWriter writer)
        {
            //这里写入想要输出的 文本标签
            writer.Write("<table>");
            writer.Write("<tr> <td>用户名:</td> <td> <input type='text' name='TextUser'/> </td>  </tr>");
            writer.Write("<tr><td>密码:</td> <td><input type='text' name='TextPwd'/></td>   </tr>");
            writer.Write("<tr><td><input type='button' Value='确定'/></td> <td><input type='submit' Value='取消'/></td> </tr>");
            writer.Write("</table>");

        }
    }
}

View Code

代码写入成功后 我们进行生成操作

 威尼斯国际娱乐 8

  so,目前普遍的解决方案是这样的:

if(!file_1.exists()){//判断文件夹是否存在(不存在则创建这个文件夹)

然后创建新的项目进行引用

  在file控件外面包裹一层容器,并设置其尺寸,通过定位将file控件右侧区域(因为IE9中file控件左侧区域单击无效)显示到目标区域,并为容器设置溢出隐藏。同时,为了让控件可被点击,我们让file处于较高的层并设置透明,只让容器样式可见,以此达到视觉与交互风格的统一。见代码:

 

这里是我们新创建的项目

威尼斯国际娱乐 9

然后我们需要把我们生成的控件添加到工具箱

操作 如下  点击Vs界面 
工具(T)—->点击选择工具箱(x)—>点击浏览(B)—>确定
这样就可以了

威尼斯国际娱乐 10*

在我们工具箱中查找拖拽就能实现我们想要的功能了

 

威尼斯国际娱乐 11

<style type="text/css">
  .container{
      font-family: "microsoft yahei";
      position: relative;
      width:200px;
      height: 80px;
      border:1px solid #ccc;/*为了看上去明显*/
      overflow: hidden;
      line-height: 80px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      background-color: #ccc;
      border-radius: 4px;
  }
  .container:hover{
      background-color: #eee;
  }
  #myFile{
      position: absolute;
      font-size: 300px;
      cursor: pointer;
      right:0;
      top:0;
      opacity: 0;
      filter: alpha(opacity=0);
  }

</style>
<div class="container">
    <input type="file" name="myFile" id="myFile" value="" />
    选择文件
 </div>

    file_1.makedir();//创建文件夹

  希望对大家有所帮助————————指教请留言

 

 

 

 

 

 

 

 

 

 

 

 

    

 

  这样我们基本上解决了以上所说的问题了。

}  

  HTML5到来之前,我们对于file控件可以利用的有用数据也就是value属性了,H5给file控件新增了files属性,该属性包含file控件选择的文件对象的集合,其中包括上次修改时间、名称、大小等信息。这极大地方便了我们开发者,还记得以前在公司做一个项目,要控制上传文件大小的时候还需要借助于flash来实现,否则只能等文件上传到服务端了再判断大小,结果很多时候上传了一个很大的文件,页面加载了半天(向后台传递需要走网络,比较耗时),最后还是告诉我文件过大。试想,这样的体验用户孰忍直视?(PS:IE9不支持files属性)

 

  然而随着技术的发展,我们发现了另外一种可能更符合用户操作习惯的上传文件的方式:拖拽。现在已经有很多网站支持这种方式了。我们看一个演示的例子:

File file = new File(File.separator + “mnt” + File.separator + “sdcard”

  

  • File.separator + “1.txt”);
<style>
            html,body,div{
                margin:0;
                padding: 0;
            }
            #file{
                display: none;
            }
            .up-area{
                margin:50px auto;
                border: 1px dashed #ccc;
                background-color: #eee;
                width:600px;
                height:400px;
                line-height: 400px;
                text-align: center;
                color: #666;
                cursor: pointer;
            }
            .up-area:hover{
                background-color: #ddd;
            }
        </style>
<input type="file" id="file"/>
        <div class="up-area" id="upArea"></div>
        <script type="text/javascript">
            (function(){
                var area= document.getElementById("upArea"),
                    file = document.getElementById("file");
                function uploadFile(fs){
                    console && console.log(fs);
                }
                area.onclick = function(){
                    console && console.log("click");
                    file.click();
                }
                file.onchange=function(){
                    uploadFile(this.files);
                }
                area.ondragenter = function(e){
                    this.className = "up-area hover";
                    e.preventDefault();
                }
                area.ondragover = function(e){
                    e.preventDefault();
                }
                area.ondrop = function(e){
                    e.preventDefault();
                    console && console.log("drop");
                    var dt = e.dataTransfer;
                    this.className = "up-area";
                    uploadFile(dt.files);
                };
            })();

</script>

 

  将文件拖至灰色虚线区域即可查看效果,这里我们主要关注的是div的ondrop事件,我们看到files属性并不是来自file控件,而是dataTransfer对象,我们看到,H5貌似又给我们提供了一种file控件之外的文件上传途径。

if(!file.exists()){//判断文件是否存在(不存在则创建这个文件)

  那我们继续用用吧!

 

  我们知道,一般的上传文件过程是这样的:点击选择文件或直接将文件拖拽至区域内,触发文件上传,文件异步发送至服务器,待服务器处理完毕,返回消息显示到页面上。

    storefile.createNewFile();//创建文件夹

  传统的文件上传要实现异步,通常有两种途径(iframe模拟、flash插件)。我们这里都不展示了,我们用FormData,用js创建一个表单对象,并向其中添加表单数据,结合XMLHttpRequest对象将表单异步提交。

}

  看代码:

function uploadFile(fs){
                var len = fs.length;
                for(var i=0;i<len;i++){
                    sendFile(fs[i]);
                }
            }
            function sendFile(file){
                var xhr = new XMLHttpRequest(),
                    fd = new FormData();//ie10+ supported
                fd.append('file',file);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        consoleDiv.innerHTML += "<br/>" + xhr.responseText;//多文件
                    }
                }
                xhr.open("POST",'upload.php');
                xhr.send(fd);
            }
            file.onchange = function(){//file控件属性改变时触发上传
                uploadFile(this.files);
            }
            area.ondrop = function(e){//拖拽区域拖入文件时触发上传
                e.preventDefault();
                var dt =e.dataTransfer;
                uploadFile(dt.files);
            }

  代码内容比较简单,不再赘述……需要注意的一点就是FormData在IE系列浏览器里,9完全不支持,10和11都是部分支持。

  说到这里,与文件上传相关的,我们还想看一个H5新增的对象:FileReader。js创建FileReader对象比较简单:var
reader = new FileReader();通过FileReader对象可以访问文件,看一个简单的例子:

var rd = new FileReader();
rd.onload=function(e){
   console && console.log(e.target.result);
}
rd.readAsText(file);

  以上代码中file参数是一个file对象,可以是File控件的file属性中FileList中的一个,也可以是dataTransfer中files属性中FileList中的一个。

  关于FileReader更多的内容同学们可以自己搜寻,先到这里了。由于怕明天会加班,没时间写博,故而提前了一天。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图