javascript动态添加本地文件列表信息
工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识.
而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用.
看源码总是让人 无语.一知半解不知道说的什么.
下面是效果图.功能一看便知.
下面是源码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>附件添加</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <style type="text/css">
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:220px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} li{list-style-type:none;}
.div1{
float:left;
width:10%;
text-align: center;
height:24px;
}
.div2{
float:left;
width:25%;
height:24px;
}
.div3{
float:left;
width:45%;
height:24px;
}
.div4{
float:left;
width:10%;
text-align: center;
height:24px;
}
.divHeader{
margin-right: 10px;
float: left;
vertical-align: middle;
line-height: 24px; }
.mar{
margin-left:0px;
}
.bor{
height: 24px;
border-bottom:1px solid rgb(223,223,223);
margin-top: 15px;
color:rgb(51,51,51);
}
.cur{
cursor:auto;
}
.def{
color: rgb(223,223,223);
font-style: italic;
}
</style>
</head> <body> <div id="page-wrapper" style="margin:auto;width:1000px;"> <div style="margin-top: 50px; margin-left: 100px;">
<div class="divHeader" ><span>附件概要</span></div>
<div>
<input id="description" class='txt mar' value=""/>
<input id="path" class='txt mar' value=""/>
<input id="fileInput" type="file" style="display:none" >
<input type='button' class='btn mar' style="margin-left:30px;" onclick="$('input[id=fileInput]').click();" value='浏览...' />
<input id="append" type='button' class='btn mar' value='追加' />
</div>
<pre id="fileDisplayArea"><pre>
</div> <div style="">
<ul>
<li > <div class="div1" > <span>编号</span></div>
<div class="div2" > <span>附件简介</span></div>
<div class="div3" > <span>附件路径</span></div>
<div class="div4"> <span>操作</span></div> </li>
<div style="clear:both;"></div>
</ul>
<ul id="data">
<li><div class="bor"><div class="div1" dd="22"> <span class="serial cur">1</span> </div><div class="div2"><span class="cur" title="ggg">ggg</span></div><div class="div3"><span class="cur" title="C:\fakepath\业务协同.html">C:\fakepath\业务协同.html</span> </div><div class="div4"><span><a onclick="deleteLi.call(this)" style="text-decoration: none;" href="javascript:void(0);">删除</a></span></div></div> </li>
<div style="clear:both;"></div>
<li><div class="bor"><div class="div1" dd="22"> <span class="serial cur">2</span> </div><div class="div2"><span class="cur" title="aaaa">aaaa</span></div><div class="div3"><span class="cur" title="sss">sss</span> </div><div class="div4"><span><a onclick="deleteLi.call(this)" style="text-decoration: none;" href="javascript:void(0);">删除</a></span></div></div> </li>
<div style="clear:both;"></div>
</ul> </div>
<div> <input style="float: right;margin-right: 184px;" id="apply" type='button' class='btn mar' value='反馈' /> </div>
</script>
<script type="text/javascript"> $(function(){
$("#description").val("附件描述");
$("#description").addClass("def");
$("#path").val("附件路径");
$("#path").addClass("def");
}) //手动输入才会除法改变事件
// $("#path").on('input',function(e){
// alert('Changed!')
// });
function processInputPath(){ if($("#path").val()=='附件路径')
{
$("#path").val("");
$("#path").removeClass("def");
}
else if($("#path").val()=='')
{
$("#path").val("附件路径");
$("#path").addClass("def");
}
}
function processInputPathDes(){ if($("#description").val()=='附件描述')
{
$("#description").val("");
$("#description").removeClass("def");
}
else if($("#description").val()=='')
{
$("#description").val("附件描述");
$("#description").addClass("def");
}
}
$("#description").focus(function(){
processInputPathDes();
}); $("#description").blur(function(){
processInputPathDes();
}); $("#path").focus(function(){
processInputPath();
}); $("#path").blur(function(){
processInputPath();
});
//保存json的字面量json对象;
var data=eval('[]');
$('input[id=fileInput]').change(function() {
$('#path').val($(this).val());
$("#path").removeClass("def");
}); $("#append").click(function(){
var descri=$("#description").val();
var fileInput=$("#path").val(); if(descri==undefined||descri==""||descri=="附件描述"){
alert("请输入描述");
return false;
}
if(fileInput==undefined||fileInput==""||fileInput=="附件路径"){
alert("请选择文件");
return false;
}
var serial=getMaxSerial();
//封装描述,路径数据到json for(var i in data){
if(fileInput==data[i]){
alert("不能重复添加附件");
return false;
}
}
data.push(fileInput);
createLi(serial,descri,fileInput);
}) function createLi(serial,descri,fileInput){
//拼接添加li
var descriSub= descri;
if(getLength(descri)>28){
descriSub= getShowStr(descri,26);
} var fileInputSub= fileInput;
if(getLength(fileInput)>50){
fileInputSub= getShowStr(fileInput,48);
} var str="<li ><div class='bor'><div class='div1' dd='22'> <span class='serial cur'>"+serial+"</span> </div><div class='div2'><span class='cur' title='"+descri+"'>"+descriSub+"</span></div><div class='div3'><span class='cur' title='"+fileInput+"'>"+fileInputSub+"</span> </div><div class='div4'><span><a onclick='deleteLi.call(this)' style='text-decoration: none;' href='javascript:void(0);'>删除</a></span></div></div> </li> <div style='clear:both;'></div>"; $("#data").append($(str));
$("#path").val("");
$("#description").val("");
processInputPath();
processInputPathDes(); }
function deleteLi(){
var title= $(this).parent().parent().siblings(".div3").children("span").attr("title");
$(this).parent().parent().parent().parent().remove(); for(var i in data){
if(data[i]==title)
{data.splice(i,1);}
}
}
function getMaxSerial()
{
var serial= Number($(".serial:last").text());
if(serial==undefined||serial==""||serial==null){
serial=1;
}
else{
serial=serial+1;
}
return serial
} function getLength(str)
{
var realLength = 0;
for (var i = 0; i < str.length; i++)
{
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128)
realLength += 1;
else
realLength += 2;
}
return realLength;
}
//根据长度获取index
function getIndex(str,len)
{
var realLength = 0;
var charLen=0;
for (var i = 0; i < str.length; i++)
{
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128)
realLength += 1;
else
realLength += 2; if(realLength>=len-1){
charLen=i;
break;
}
}
return charLen;
}
function getShowStr(str,len){ return str.substring(0,getIndex(str,len))+"..";
} </script>
</body>
</html>
javascript动态添加本地文件列表信息的更多相关文章
- asp.net后台代码动态添加JS文件和css文件的引用
首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- C/C++ 获取目录下的文件列表信息
在C/C++编程时,需要获取目录下面的文件列表信息. 1.数据结构 struct dirent { long d_ino; /* inode number 索引 ...
- JavaScript 动态添加div 绑定点击事件
1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...
- Javascript动态引用CSS文件的2种方法介绍
最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现 ...
- [Android] 通过GridView仿微信动态添加本地图片
原文:http://blog.csdn.net/eastmount/article/details/41808179 前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述 ...
- javascript动态添加form表单元素
2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...
- javaScript动态添加样式
[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...
随机推荐
- Android 扫一扫----ZXing 的使用
1. 首先现在ZXing的lib 2. 在Android Studio集成ZXing. public void scan(View view){ startActivityForResult(new ...
- bzoj3822: 文学
Description 巨酱和主席是一对好朋友.他们都很喜欢读书,经常一起阅读相关领域书籍,进行系统的学习.一天主席列出了一份列表,里面共 p 本书,其中不乏<约翰克里斯多夫>,<名 ...
- Keepalived安装使用详解
简介 Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障,类似的工具还有heartbeat.corosync.pacemaker. 但是它一般不会单独出现, ...
- 【uTenux实验】信号量
信号量(semaphore)是一个用来指示可用的资源并将可用资源的数量以数值的形式表示出来的对象.当使用一组资源时,信号量用来实现互斥控制和同步.uTenux提供了信号量出来的API,可以很方便地使用 ...
- 【巩固】CSS3的animation基础
终于结束了最后css3的一节课,关于animation的使用,其实之前已经用过一次.大致要了解的就是,关于如何让动画停在最后一帧的方法.视频里有提到过css3出了个新的样式可以实现,但是老师没有记住, ...
- help和dir函数
help()函数是查看函数或模块用途的详细说明,比如:help('re'),help('re.split') 而dir()函数是查看函数或模块内的操作方法都有什么,输出的是方法列表.
- 关于sublime text2
转自:http://www.qianduan.net/essential-to-sublime-the-text-2-plugins.html Sublime Text 2是一个轻量.简洁.高效.跨平 ...
- MFC使用TRACKMOUSEEVENT触发mouseHover和mouseLeave
为对话框添加WM_MOUSEHOVER或WM_MOUSELEAVE消息并不会响应.MFC需要特殊处理,其中一法就是使用TRACKMOUSEEVENT void CmfcDlgDlg::OnMouseM ...
- Spring：No bean named 'beanScope' is defined
初学Spring,“No bean named 'beanScope' is defined”这个问题困扰了我好几个小时,查资料无果后,重写好几遍代码后发现问题居然是配置文件不能放在包里...要放在s ...
- 创建一个swift项目
笔者认为你已经有了oc的开发基础,流程是一样的,选择开发语言为swift即可.这里主要说明一下一些常用的配置: 一般我们不使用XIB和storyboard,所以在系统自动创建的文件中删除main.st ...