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= ...
随机推荐
- 重定向 url cookie
想象下面两行伪代码: 1. setCookie(...);2. redirect(new_web_url); 首先设置一个Cookie,然后重定向到另外一个网址,这个网址跟当前网站的域名不同 在多数情 ...
- JSTL中的scope属性
前两天接到老大一个任务:要验证一下<c:import>能否动态地引入不同的文件.当时很兴奋,要知道在对日外包里面,这个也得算技术活了.呵呵! 说干就干,写了两个jsp文件:m.jsp t ...
- pt-find 使用实例
pt-find - Find MySQL tables and execute actions, like GNU find. 用法:pt-find [OPTION...] [DATABASE...] ...
- 字符数组，字符指针，字符串常量，以及sizeof的一些总结
1.以字符串形式出现的,编译器都会为该字符串自动添加一个\0作为结尾 如在代码中写"abc",编译器帮你存储的是"abc\0". 2.数组的类型是由该数组所存放 ...
- Asp.net MVC 之过滤器
整理一下MVC中的几种过滤器,以及每种过滤器是干什么用的 四种过滤器 1.AuthorizationFilter(授权过滤器) 2.ActionFilter(方法过滤器) 3.ResultFilter ...
- java语言实现堆排序
package secondChapter; import java.util.Random; public class HeapSort { private static int AHeapSize ...
- html5 xdm 页面之间的通信
<!-- 这个是父页面xdm.html --><!DOCTYPE html> <html> <head> <meta charset=" ...
- eclipse 代码自动提示
从Window -> preferences -> Java -> Editor -> Content assist -> Auto-Activation下,我们可以在& ...
- VG vs SS WE vs IM [20160815]
上单:慎,纳尔,艾克,艾瑞莉娅,普朗克 中单:弗拉基米尔,玛尔扎哈,卡尔玛,丽桑卓,索尔,崔斯特,辛德拉 打野:雷克赛,奈德丽,古拉加斯,伊莉丝,赫卡里姆,玛尔扎哈 下路:艾希,克格莫,烬,希维尔,布 ...
- delphi中Message消息的使用方法
实例1 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls ...