移動端上傳圖片/視頻

時間 2019-11-07

標籤移動端上圖片視頻欄目無線简体版

原文原文鏈接

<input type="file" accept="image/*;capture=camera" class="input"> html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <title>移動端上傳圖片/視頻</title>

    <style>
       /* reset*/
       *{margin:0;padding:0;box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
       *:focus{outline:none;}
       html{-webkit-text-size-adjust:none;}
       html, body{font-size:62.5%;}
       body{max-width:640px;margin:0 auto;box-sizing:border-box;color:#525151;font-family:'Microsoft Yahei';font-size:1.6rem;}
       input, textarea{font-size:1.6rem;color:#525151;font-family:'Microsoft Yahei';}
       *:focus{outline:none;}
       ul, li{list-style:none;}
       img{border:none;}
       a{text-decoration:none;}
       /*圖片全屏*/.img-full{width:100%;margin:0 auto;display:block;}


       .ad-img{width:90%;margin:0 auto;padding: 20px;}
       .ad-img h3{font-weight:normal;font-size:1.6rem;margin-bottom: 10px;}
       .sctp li{
            position:relative;
            width:100px;
            height:100px;
            overflow:hidden;
            display: inline-block;
            border: 1px solid #dbdbdb;
            margin-right:0.3rem;
           vertical-align: top;
           margin-bottom: 0.5rem;
        }
       .sctp li video{
           position: absolute;
           transform: translateY(-50%);
           -webkit-transform: translateY(-50%);
           top: 50%;
           left: 0;
           width: 100%;
       }
       .sctp .pic_look{
           width: 100%;
           height: 100%;
           background-size: cover;
           background-position: center center;
           background-repeat: no-repeat;
       }
       .sctp em{
           position: absolute;
           display: inline-block;
           width: 25px;
           height: 25px;
           background-color: red;
           color: #fff;
           font-size: 18px;
           right: 5px;
           top: 5px;
           text-align: center;
           line-height: 22px;
           border-radius: 50%;
           font-weight: 700
       }
        .upload-btn {
            height:100%;
            position: relative;
            display: inline-block;
            background-image: url(images/add.png);
            box-sizing: border-box;
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
         }
        .upload-btn input {width: 100%;height: 100%;opacity: 0;}
    </style>
</head>
<body>

<div class="ad-img">
    <h3>移動端上傳圖片/視頻</h3>
    <ul class="sctp mt15">
        <li><div class="upload-btn"><input type="file" accept="image/*,video/*" name="" id=""></div>
        </li>
    </ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        $(".upload-btn input").on("change", function () {
            var file=this.files[0];  //獲取文件
            var fileType=file.type; //獲取文件類型
            //判斷是不是視頻文件 0視頻 -1圖片；
            if(fileType.search("video")==0){
                var createObjectURL = function(file){
                    return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](file);
                };
                var videoSrc = createObjectURL(file);
                var videoNew = "<li><video controls='controls'><source src='"+videoSrc+"' ></source></video><em onclick='delect_pic(this)'>-</em></li>";
                $(".sctp").prepend(videoNew);

            }else{
                var fr = new FileReader();
                var imgStr;
                fr.readAsDataURL(file);
                fr.onload = function(file){
                    var imgNew = new Image();
                    imgNew.src = file.target.result;
                    console.log(imgNew.src);
                    imgStr = "<li><div class='pic_look' style='background-image: url("+ imgNew.src + ")'><em onclick='delect_pic(this)'>-</em></div></li>";
                    $(".sctp").prepend(imgStr);
                    console.log(imgStr);
                }


            }
        });
    })
    // 刪除
    function delect_pic(item){
        $(item).parents("li").remove();
    }
</script>

</body>
</html>

經測試谷歌瀏覽器上上傳過的視頻再次上傳不了，手機上無此問題。蘋果手機瀏覽器視頻只支持播放一次，並且沒有默認圖片jquery