Tan's-Blog

1. files对象

在HTML5中，从Web网页上访问本地文件系统非常简单，那就是使用它新增的API，files对象。

属性	描述
name	文件名称
size	文件大小
type	文件类型

注意:用户每个选择的文件都是一个files对象，而fileList对象则为这些files对象的列表，代表用户选择的所有文件。

2. FileReader

FileReader API 主要用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步的api，使用该api可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

方法	参数	描述
readAsDataUrl	file	将文件读取为DataURL
readAsText	file	将文件读取为文本

2.1 readAsDataUrl:该方法将文件读取为一段以data开头的字符串，这段字符串实际上是dataURL.，并且读取结果都将存储在result属性中。

2.2:readAsText该方法会读取文件中的文本元素，并且读取结果都将存储在result属性中。注意:使用FileReader的时候，必须使用new运算符，创建出对象，并且调用readAsDaraUrl方法读取文件，在实例的onload事件中，获取到成功读取到的文件内容。

练习

综合以上的API进行一道简单的练习加深一下印象。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>综合练习</title>
    </head>
    <body>
        <input type="file" id="files" />
        <input type="submit" id="btn" />
        <div id="result">
        </div>
        <script type="text/javascript">
            var oFiles = document.getElementById("files");
            var oBtn = document.getElementById("btn");
            var oRes = document.getElementById("result");
            oBtn.onclick = function(){
                //console.log(oFiles.files[0].type)  输出image/jpeg
                var oType = oFiles.files[0].type;   //文件类型
                var fs = oFiles.files[0];    //文件对象
                var pattern = /^(image)\/\w+/  //判断文件类型的正则
                if(!pattern.test(oType)){
                    oRes.innerHTML = "不可以上传";
                }
                var reader = new FileReader() ;  //实例化一个接口读取文件
                reader.readAsDataURL(fs)   //读取文件
                //console.log(reader)
                //使用FileReader事件 onload 预览上传的图片
                reader.onload = function(){
                    var oNode = document.createElement("img");  //创建img标签
                    oNode.src = this.result;  //
                    oRes.appendChild(oNode)  //追加图片
                    oFiles.value = ''
                }
            }
        </script>
    </body>
</html>

3. FileReader事件

FileReader API中包含了一套完整的事件模型，用于捕获读取文件的状态

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadstart	读取完成触发，无论成功或失败
onloadend	读取时触发
onprogress	读取中（接受事件对象）

注意：文件上传是属于数据流的格式，那么我们就要注意，就要使用HTML5中的FormData对象

练习：文件上传进度条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文件上传进度条</title>
        <style>
            *{
                margin: 0;
            }
            #progress{
                width: 200px;
                height: 20px;
                background: #ddd;
                position: relative;
            }
            #info{
                width: 0px;
                height: 20px;
                background: aquamarine;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body style="margin: 200px;">
        <input type="file" name="files" id="files" value="" />
        <div id="progress">
            <div id="info"></div>
        </div>
        <div id="result">

        </div>
        <input type="submit" name="btn" id="btn" />
        <script type="text/javascript">
            var oFiles = document.getElementById("files");
            var oBtn = document.getElementById("btn");
            var oRes = document.getElementById("result");
            var oInfo = document.getElementById("info");
            oBtn.onclick = function(){
                var fs = oFiles.files[0];
//                console.log(fs)
                var reader = new FileReader(fs)
//                console.log(reader)
                reader.onprogress = function(e){
                    console.log(e)
                    oInfo.style.width = Math.round(e.loaded/e.total*200)+"px"
                    oRes.innerHTML = Math.round((e.loaded/e.total*200)*0.5)+"%"
                }
                reader.readAsDataURL(fs)
            }
        </script>
    </body>
</html>

4. HTML5新增拖拽的API

在HTL5中，支持直接拖放操作的api。虽然HTML5之前已经可以使用mousedown,mousemove和mouseup来进行操作，但只支持在浏览器内部的拖放；而在HTML5中，已经支持在浏览器与其它应用程序之间的数据互相拖动。

API

实现步骤：

把需要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。
编写与拖放有关的事件处理代码。

练习：

练习1：datatransfer中的setData()和getData()设置文本


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>datatransfer中的setData()和getData()设置文本</title>
        <style>
            *{
                margin: 150px;
            }
            .drag{
                width: 100px;
                height: 100px;
                border: 1px solid #666;
            }
            .result{
                width: 200px;
                height: 200px;
                background: #7FFFD4;
            }
        </style>
    </head>
    <body>
        <div class="drag" id="drag" draggable="true"></div>
        <div class="result" id="result"></div>
        <script type="text/javascript">
            var oDrag = document.getElementById("drag");
            var oRes = document.getElementById("result");
            //拖拽元素
            //拖拽开始
            oDrag.ondragstart = function(e){
//                console.log(e)
                e.dataTransfer.setData("title","今日头条 ")  //设置数据
            }
            //目标元素
            //进入元素是触发
            oRes.ondragenter = function(){
                this.innerHTML = "进入目标元素"
            }
            //在元素上触发
            oRes.ondragover = function(e){
                //必须阻止默认时间触发
                e.preventDefault()
            }
            //离开元素是触发
            oRes.ondragleave = function(){
                this.innerHTML = ""
            }
            //在目标元素释放
            oRes.ondrop = function(e){
                //这里也要阻止默认事件
                var test = e.dataTransfer.getData("title")   //获取设置数据的值
                this.innerHTML = test
            }
        </script>
    </body>
</html>

练习2：拖拽实现文本预览


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拖拽实现文本预览</title>
        <style>
            *{
                margin: 150px;
            }
            .result{
                width: 200px;
                height: 200px;
                background: aquamarine;
            }
        </style>
    </head>
    <body>
        <div class="result">

        </div>
        <div id="view">

        </div>
        <script type="text/javascript">
            var oRes = document.getElementsByTagName("div")[0];
            var oView = document.getElementById("view");
            /*
             1. 文件进入  ondragenter
             2. 文件在元素上  ondragover
             3. 文件释放  ondrop 
             注意： ondragover是一定要阻止默认事件 preventDefault()
             * */
            //1.文件进入
            oRes.ondragenter = function(){
                this.innerHTML = "可以放手了"
            }
            //2.在元素上  阻止默认事件
            oRes.ondragover = function(e){
                //阻止默认事件
                e.preventDefault();
            }
            //3.文件释放
            oRes.ondrop = function(e){
                //阻止默认
                e.preventDefault();
                var fs = e.dataTransfer.files[0];   //获取文件
                var reader = new FileReader();    //实例化文件对象
                reader.readAsText(fs)   //读取文件
                reader.onload = function(){   //文件加载完成事件
                    oView.innerHTML = this.result
                }
            }
        </script>
    </body>
</html>

练习3：拖拽预览单张图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拖拽预览单张图片</title>
        <style type="text/css">
            *{
                margin: 0;
            }
            ul li{
                list-style: none;
            }
            .drag{
                width: 200px;
                height: 200px;
                border: 1px solid #666;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="drag">
            文件放这里
        </div>
        <ul id="view">

        </ul>
        <script type="text/javascript">
            var oDrag = document.getElementsByTagName("div")[0];
            var oView = document.getElementById("view");
            var obj = {};
            //1. 文件进入
            oDrag.ondragenter = function(){
                this.innerHTML = "可以释放了"
            }
            //2. 在元素上面
            oDrag.ondragover = function(e){
                //阻止默认事件
                e.preventDefault();
            }
            //2. 释放文件
            oDrag.ondrop = function(e){
                e.preventDefault();
                var fs = e.dataTransfer.files;   //获取文件
                var reader = new FileReader();
                reader.readAsDataURL(fs[0]);
                reader.onload = function(){
                    if(!obj[this.result]){
                        //创建标签
                        var oLi = document.createElement("li");
                        var oImg = document.createElement("img");
                        oImg.src = this.result;
                        oLi.appendChild(oImg);
                        oView.appendChild(oLi);
                        obj[this.result] = this.result
                    }else{
                        alert("不要重复提交")
                    }
                }
            }
        </script>
    </body>
</html>

练习4：拖拽预览多张图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>拖拽预览多张图片</title>
        <style type="text/css">
            *{
                margin: 0;
            }
            ul li{
                list-style: none;
            }
            .drag{
                width: 200px;
                height: 200px;
                border: 1px solid #666;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="drag">
            文件放这里
        </div>
        <ul id="view">

        </ul>
        <script type="text/javascript">
            var oDrag = document.getElementsByTagName("div")[0];
            var oView = document.getElementById("view");
            var obj = {};
            //1. 文件进入
            oDrag.ondragenter = function(){
                this.innerHTML = "可以释放了"
            }
            //2. 在元素上面
            oDrag.ondragover = function(e){
                //阻止默认事件
                e.preventDefault();
            }
            //2. 释放文件
            oDrag.ondrop = function(e){
                e.preventDefault();
                var fs = e.dataTransfer.files;   //获取文件
                for (var i=0;i<fs.length;i++) {
                    var reader = new FileReader();
                    reader.readAsDataURL(fs[i]);
                    reader.onload = function(){
                        if(!obj[this.result]){
                            //创建标签
                            var oLi = document.createElement("li");
                            var oImg = document.createElement("img");
                            oImg.src = this.result;
                            oLi.appendChild(oImg);
                            oView.appendChild(oLi);
                            obj[this.result] = this.result
                        }else{
                            alert("不要重复提交")
                        }
                    }
                }
                this.innerHTML = "文件放这里"
            }
        </script>
    </body>
</html>

练习5：拖拽实现购物车添加效果

效果图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Boostrap+H5拖拽购物车</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .content{
            width: 520px;
            margin: 20px auto;
            text-align: center;
        }
        #list li{
            width: 120px;
            float: left;
            border: 1px solid #ddd;
            box-shadow: 2px 2px 4px #ddd;
            margin-right: 5px;
        }
        #list li img{
            width: 100%;
        }
        .clear{
            clear: both;
        }
        .shopcar table{
            border-collapse: collapse;
        }
        
    </style>
</head>
<body>
    <div>
        <h1>Boostrap+H5拖拽购物车</h1>
        <ul id="list">
            <li draggable="true">
                <img src="img/f1.jpg"/>
                <p>美丽的鲜花1</p>
                <p>52￥</p>
            </li>
            <li draggable="true">
                <img src="img/f2.jpg"/>
                <p>美丽的鲜花2</p>
                <p>130￥</p>
            </li>
            <li draggable="true">
                <img src="img/f3.jpg"/>
                <p>美丽的鲜花3</p>
                <p>140￥</p>
            </li>
            <li draggable="true">
                <img src="img/f4.jpg"/>
                <p>美丽的鲜花4</p>
                <p>99￥</p>
            </li>
        </ul>
        <div></div>
        <div id="shopcar">
            <h3>购物车</h3>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>商品数量</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="context">
                    <!--<tr>
                        <td>1</td>
                        <td>美丽的鲜花1</td>
                        <td>52</td>
                        <td>
                            <button type="button" class="btn btn-danger btn-xs" id="btn">删除</button>
                        </td>
                    </tr>-->
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">总结：<em id="allMoney">0</em>￥</td>
                        <td>
                            <button class="btn btn-success btn-xs">结算</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            /*
             1.开始拖动li  用到的事件ondragstart 设置数据 setData() 获取li的文本
             2.ondragover 阻止默认事件
             3.在目标元素释放li是的事件 ondrop
             释放后要getData（）获取上面设置的数据进行字符串拼接 追加到tbody 
             计算总的商品数量和价格
             继续添加同种商品 ........没思路
             按钮功能还在完善中
             * */
            var oList = document.getElementById("list");
            var allLis = document.getElementsByTagName("li");
            var oShopcar = document.getElementById("shopcar");
            var oAllMoney = document.getElementById("allMoney");
            var oAllShopNum = document.getElementById("shopNum");
            var oContext = document.getElementById("context");
            var obj = {}
            var Allprice = 0 ;
            var AllNum = 0 ;
            var num = 0 ;
            //1.拖拽开始
            for (var i=0;i<allLis.length;i++) {
                allLis[i].ondragstart = function(e){
                    //获取 p 标签的文本
                    var oP = this.getElementsByTagName("p");  //获取当前 li 的 p 标签
                    //设置数据
                    e.dataTransfer.setData('title',oP[0].innerHTML);  //当前的标题
                    e.dataTransfer.setData('price',oP[1].innerHTML);  //当前的价格
                }
            }
            //2.阻止默认事件
            oShopcar.ondragover = function(e){
                e.preventDefault();
            }
            //3.释放元素
            oShopcar.ondrop = function(e){
                e.preventDefault();
                //获取设置的数据
                var title = e.dataTransfer.getData("title");
                var price = e.dataTransfer.getData("price");
//                console.log(obj)
                if(!obj[title]){  //如果设置的title不相等就继续追加
                    num++
                    var oTr = document.createElement("tr");
                    var oContent = '<td>'+num+'</td><td>'+title+'</td><td>'+price+'</td><td><button type="button" class="btn btn-danger btn-xs" id="btn">删除</button></td>'
                    oTr.innerHTML = oContent;
                    oContext.appendChild(oTr)
                    obj[title] = 1 ;
                    num =0 ;
                }else{  //否则就累加
                    var oTd_shopNum = document.getElementsByClassName("td_shopNum");
                    var oTd_shopTitle = document.getElementsByClassName("td_shopTitle");
                    for (var i=0;i<oTd_shopTitle.length;i++) {
                        if(oTd_shopTitle[i].innerHTML == title){
                            oTd_shopNum[i].innerHTML = parseInt(oTd_shopNum[i].innerHTML)+1;
                        }
                    }
                }
                //商品总价
                Allprice += parseInt(price)
                oAllMoney.innerHTML = Allprice 

            }

        }
    </script>
</body>
</html>