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