HTML5 上传前端html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="stylesheet" type="text/css" href="picture.css">
  <link rel="stylesheet" type="text/css" href="jbox.css"></head>
  <link rel="stylesheet" type="text/css" href="tuku.css"></head>
  <style type="text/css">
    body{
      padding-top: 50px;
    }
    
  </style>
<body>
  <div id="header_bar">
    <!--logo-->
    <a id="logo" href="javascript:;" onmouseover="showMenu(1)" onmouseout="hideMenu(1)">
      <div id="toggle"></div>
    </a>
    <!--导航-->
    <div id="nav">
      <a class="" href="javascript:;">首页</a>
      <a class="on" href="javascript:;">我的图库</a>
      <a id="add_image" href="javascript:;" onclick="showUploadImage()">添加图片</a>
      <a id="add_collection" href="javascript:;" onclick="showAddCollection()">添加图集</a>
    </div>
    <!--搜索-->
    <div id="search">
      <input value="搜索你喜欢的图片..." id="txtKeyword" type="text" size="27" name="q" autocomplete="off" class="default_value" style="color: rgb(153, 153, 153);">
      <a href="javascript:;" id="btnQuery" onclick=""></a>
    </div>
    <a id="user_panel" href="javascript:;" onmouseover="showMenu(2)" onmouseout="hideMenu(2)">
      <img src="http://i2.hjfile.cn/f48/80/91/21028091.jpg" width="22" height="22">
      lin2020（图库用户）
      <div id="toggle_r"></div>
    </a>
    <!--logo menu-->
    <ul id="logo_menu" onmouseover="showMenu(1)" onmouseout="hideMenu(1)" style="height: 58px; display: none;">
      <li id="">
        <a href="javascript:;" target="_blank">沪江工作台</a>
      </li>
      <li id="">
        <a href="javascript:;" target="_blank">网校语料库</a>
      </li>
    </ul>
    <!--user menu-->
    <ul id="user_menu" onmouseover="showMenu(2)" onmouseout="hideMenu(2)" style="height: 87px; display: none;">
      <li>
        <a href="javascript:;" target="_blank">图库采集插件</a>
      </li>
      <li>
        <a href="javascript:;">更新日志</a>
      </li>
      <li class="seperator"></li>
      <li>
        <a class="link_headLogout" href="javascript:;" onclick="document.location.href='http://pass.hujiang.com/uc/handler/logout.ashx?url='+encodeURIComponent(document.location.href);return false;">退出</a>
      </li>
    </ul>
  </div>
  <!-- head--end  -->
  <!-- begin context================================== -->
  <table class="upload-list">
    <tbody>
      <tr>
        <th>缩略图</th>
        <th>上传状态</th>
        <th>图片信息录入</th>
        <th>上传</th>
      </tr>
    </tbody>
    <tbody class="file-body">
      <tr>
        <td><img src="Thumb.gif" width="200" height="100" alt=""> </td>
        <td> - </td>
        <td class="label">
          <div>
            <label>
              <b>主题分类</b>
              <select id="MyCategory">
                <option value="0">请选择</option>
                <option value="1">人物</option>
                <option value="2">食物</option>
                <option value="3">事件</option>
                <option value="4">动植物</option>
              </select>
            </label>
            <label class="hand"><input name="copyright" value="own" type="radio">自有版权</label>
            <label class="hand"><input name="copyright" value="out" checked="checked" type="radio">外购版权</label>
            <br/>
          </div>

          <label>
              <b>标签</b>
              <textarea id="MyLabels"></textarea>
          </label>
        </td>
        <td>
          <!-- <button>确定上传</button> -->
          <input type="file" multiple="mulitple" name="fileselect[]" id="fileToUpload" onchange="fileSelected();" accept="image/*" valeu="选择上传" />    
        </td>   
      </tr>
    </tbody>
  </table>


  <!-- context end==================================== -->
  <!-- Le javascript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
      $(function(){
        
      });
      function CreateFileDOM(file, i){
        var tr = document.createElement("tr");
        tr.id = "fileList" + i;
        
        //分类选中状态
        var cate = $("#MyCategory").val();
        var option = $("#MyCategory").html();
        var r = new RegExp('(value="'+cate+'")', "ig")
        option = option.replace(r, '$1 selected="selected"');

        //版权选中状态
        var cr = $("input[name='copyright']:checked").val();

        //--td1
        var td = document.createElement("td");
        var img = document.createElement("img");
        img.width = 200;
        img.height = 100;
        var reader = new FileReader();
        reader.onload = function(e){
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
        tr.appendChild(td);
        td.appendChild(img);
        //td2
        td = document.createElement("td");
        var span = document.createElement("span");
        span.id = 'status' + i;
        span.innerHTML = ' - ';
        td.appendChild(span);
        tr.appendChild(td);
        //td3
        td = document.createElement("td");
        td.className = 'label';
        var div = document.createElement("div");
        label = document.createElement("label");
        div.appendChild(label);
        var b = document.createElement("b");
        b.innerHTML='主题分类';
        label.appendChild(b);
        var select = document.createElement("select");
        select.name = "category" + i;
        select.id = "category" + i;
        select.innerHTML = option;
        label.appendChild(select);

        label = document.createElement("label");
        label.class = 'hand';
        var input = document.createElement("input");
        input.name = 'copyright' + i;
        input.type = 'radio';
        if(cr == "own"){
          input.checked = 'checked';
        }
        span = document.createElement("span");
        span.innerHTML = '自有版权';
        label.appendChild(input);
        label.appendChild(span);
        div.appendChild(label);

        label = document.createElement("label");
        label.class = 'hand';
        var input = document.createElement("input");
        input.name = 'copyright' + i;
        input.type = 'radio';
        if(cr == "out"){
          input.checked = 'checked';
        }
        var span = document.createElement("span");
        span.innerHTML = '外购版权';
        label.appendChild(input);
        label.appendChild(span);
        div.appendChild(label);

        label = document.createElement("label");
        b = document.createElement("b");
        b.innerHTML = '标签';
        label.appendChild(b);
        var textarea = document.createElement("textarea");
        textarea.name = "txtlab" + i;
        textarea.id = "txtlab" + i;
        textarea.value = $("#MyLabels").val();
        label.appendChild(textarea);

        td.appendChild(div);
        td.appendChild(label);
        tr.appendChild(td);
        //td4
        td = document.createElement("td");
        button = document.createElement("button");
        button.name = "upload"+i;
        button.id = "upload"+i;
        button.className = "upload";
        button.type = "button";
        button.innerHTML = "确定上传";

        td.appendChild(button);
        tr.appendChild(td);

        $(".file-body").append(tr);
      }
      
      function fileSelected() {
        $(".file-body").children('tr').first().css("display", "none");

        var files = document.getElementById('fileToUpload').files;  

        var fileMaxSize = files.length>10?10:files.length;
        for(var i=0; i<fileMaxSize; i++){
          CreateFileDOM(files[i], i);
        }

        BindUplaod();
      }

      function BindUplaod(){
        $(".upload").click(function(e) {
          var num = parseInt($(this).attr("id").replace("upload", ""));
          
          //验证分类
          var category = $("#category"+num).val();
          if(category == 0){
            alert('请选择分类');
            $("#category"+num).focus();
            return;
          }
          //验证标签
          var labels = $("#txtlab"+num).val();
          var length = labels.length;
          if(labels.indexOf('，') != -1){
            labels = labels.replace(/，/ig, ',').replace(/ /ig, '');
          }
          if(labels[labels.length-1] == ','){
            labels = labels.substr(0, labels.length -1);
          }
          $("#txtlab"+num).val(labels);
          if(labels.split(',').length <= 2){
            alert('请输入至少三个标签');
            $("#txtlab"+num).focus();
            return;
          }
          //--开始上传
          var btnName = $(this).attr("disabled", "disabled").attr("id");
          $("#status" + num).html('→').removeClass().addClass('uploading').css('color', 'green').css('font-size', '18px');

          //模拟上传过程
          var i = 0;
          var T = setInterval(function(){
            if(i%2 == 0){
              $("#status" + num).html('');
            }else{
              $("#status" + num).html('→');
            }
            i++;
          }, 500);

          //模拟上传结果
          var r = Random();
          setTimeout(function(){
            clearTimeout(T);
            if(r >= 5){
              $("#status" + num).html('√').removeClass().addClass('success').css('color', 'green').css('font-size', '18px');
              //alert("上传成功！你上传的是第 "+(num+1)+" 文件。");
            }else{
              $("#status" + num).html('×').removeClass().addClass('failed').css('color', 'red').css('font-size', '25px');
            }
            $("#"+btnName).html("重新上传").removeAttr("disabled");
          }, 3000);
          
        });
      }

      //Test
      function Random(){
        return parseInt(10*Math.random());
      }
</script>
</body>
</html>
.upload-list{
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-collapse: collapse;
    color: #555;
    text-align: center;
}
.upload-list th{
    border: 1px dashed #ccc;
    height: 30px;
    line-height: 30px;
    background: #eee;
}
.upload-list td{
    border: 1px dashed #ccc;
}
.upload-list td.label{
    text-align: left;
    padding: 5px;
}
.upload-list td.label div{
    line-height: 30px;
    height: 30px;
}
.upload-list button{
    width: 100px;
    height: 30px;
}
.upload-list input[type='radio']{
    vertical-align: top;
    margin-top: 8px;
}
.upload-list b{
    width: 53px;
    float: left;
    text-align: right;
    padding-right: 10px;
}
.upload-list .hand{
    cursor: pointer;
}
.upload-list .success, .upload-list .uploading{
    font-family: 微软雅黑;
    font-size: 18px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    color: #009900;
}

.upload-list textarea{
    width: 500px;
    height: 75px;
    margin-left: 2px;
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jasonlny/p/3542445.html