您的位置：首页 > Web前端 > HTML5

HTML5开发之通过文件对象选择文件

2016-11-14 15:11 316 查看
    在HTML中新增了两个与表单相关的API——文件API与拖放API。拖放API可以实现一些有趣的功能，允许用户拖放选项并将其放置到浏览器中的任何地方。其很好地体现了HTML5作为web应用程序规范的思路，使得开发者可以从桌面计算机中借用更多功能。

     在HTML5里，从Web网页上访问本地文件系统变得十分简单，那就是使用文件API。这个file规范里提供了一个API来表现Web应用里的文件对象。用户可以编程来选择它们，访问它们的信息。

    在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，FileL—ist对象表示用户选择的文件列表，通过添加multiple属性，在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户所选择的所有文件。

      file对象有两个属性，name属性表示文件名，不包括路径，lastModifiedDate属性表示文件的最后修改日期。

      在本例中通过单击“浏览”按钮，选择要上传的文件，然后单击“上传文件”按钮，将会弹出一个对话框，这个对话框将显示上传文件的名称。代码如下：

  <!DOCTYPE html><head> 

  <meta charSet=”UTF一8”  > 

  <title>FileList与file实例<／title> 

  <／head>

  function ShowName()  

  var file；  

  ／／返回FileList文件列表对象      

 for  (var i=0；  i<document．getElementBy工d  (”  file¨)  ．files．1ength；i++)    

            {  

     ／／file对象为用户选择的单个文件

    file=document．getElementBy工d("file”)  ．files[i]；

    ／／弹出文件名

    alert(file．name)；

        )   

     } 

   <／script>  

  选择文件：  

  <input type=’’file”id=”file”Size=”50” 

   <input type=”button”oncliCk=”ShowName  

  ／>  
  ()；”value=”上传

  HTML5开发案例关注H5edu教育HTML5开发源码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航