<!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:;

    margin:;

    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;

}

HTML5 上传前端html页面的更多相关文章

  1. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  2. Html5上传后有所见图片效果前端代码实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. zyUpload界面绝佳、体验超棒的HTML5上传插件

    一.为毛线开发它 经过了两个星期做出了两个基于HTML5的多文件上传插件,之前在做网站的时候用到文件上传这一个功能,但是大多说都是基于Flash的,正好最近HTML5很火,而且渐渐壮大起来,感觉搞前端 ...

  4. HTML5上传下载

    前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...

  5. 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  6. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  7. 一般处理程序上传文件（html表单上传、aspx页面上传）

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  8. html5 上传头像的裁剪

    本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...

  9. ajax：html5上传文件，上传之前可以实现本地预览

    本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

随机推荐

  1. 给Ubuntu软件升级命令

    以非root用户更新系统 sudo: sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用 ...

  2. Unity LOD-Level of Detail（多层次细节）用法教程

    Unity LOD 多层次细节 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...

  3. s21day04 python笔记

    s21day04 python笔记 一.上周知识回顾及补充 回顾 补充 编译型语言和解释性语言 编译型:代码写完后,编译器将其变成成另外一个文件,然后交给计算机执行 常见的编译型语言:C,C++,Ja ...

  4. jeecg-org.jeecgframework.web.system.listener.InitListener

    早上启动项目 发现报错 百度之后,发现这属于jeecg常见问题: http://www.jeecg.org/forum.php?mod=viewthread&tid=1830&extr ...

  5. Light OJ 1296：Again Stone Game（SG函数打表找规律）

    Alice and Bob are playing a stone game. Initially there are n piles of stones and each pile contains ...

  6. php-fpm的pool池子、php慢日志记录、open_basedir、php-fpm进程管理

    1.php-fpm的poo池子:目的:可以让不同的网站,对于不同的php解析,可以把不同的网站解析区分开.编辑:vim /usr/local/php5-fpm/etc/php-fpm.conf加入: ...

  7. NetCore平台下使用RPC框架Hprose

    NetCore下使用RPC框架Hprose https://www.jianshu.com/p/c903fca44d5d Hprose是国内非常优秀的RPC框架,和其它RPC框架比较起来,其它框架一般 ...

  8. xencenter创建快照和恢复快照

    创建快照 恢复快照

  9. day1 python学习

    Python的分类 编译型:一次性,将全部程序编译成二进制文件,然后再运行. 有点:执行效率高 缺点:开发效率低,不能跨平台使用. 解释型:当你程序运行时,一行一行的解释,并运行 优点:开发效率高,可 ...

  10. Modularizing your graphQL schemas

    转自: https://tomasalabes.me/blog/nodejs/graphql/2018/07/11/modularizing-graphql.html Modularizing you ...