input file 问题
0
悬赏园豆：40
[已关闭问题]
功能描述；
1、可以上传多个文件，在页面中显示（绝对路径、文件名、上传日期），上传文件的同时将该文件传到服务指定目录下
2、当点击显示的时候，能打开所选中一行或几行的文件（文件的内容显示）
3、当点击删除的时候可以，删除指定的行，每个的id都要改变，序号列也要改变，比如我刚开始的序号列是1\2\3\4\5当删除2\4后得到的是1\2\3
4、当点击添加的时候，能取得所选中行所选中文件的绝对路径和服务路径
问题描述：
1、当点击浏览的时候弹出，选择文件，当点击打开后，将该文件的绝对路径赋值（我取的路径不正确，总是默认的某一个）给第二列，同时将该文件上传到服务路径下
比如选则的是：D:\\ff,但显示的结果是C:\\
2、当我选择某一行或几行后，点击显示，能将该文件打开，比如选中的是1.xls则将该文件打开
3、当点击添加的时候，能取得这个文件的绝对路径和服务器路径，能够上传到服务器。
我实现的js代码如下,用.net开发的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://localhost:5525/Common/js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function getFile() {
document.getElementById("fileId").click();
var fileid = document.getElementById("fileId").value;
var filename = getFileName(fileid);
var filepath = getFilePath(fileid);
addTable_tr(filename, filepath);
}
function getFileName(str) {
//正则表达式
//var n = /([^\\]+)$/.exec(str);
// return RegExp.$1;
var n = str.lastIndexOf("\\");
if (n < 0) {
n = str.lastIndexOf("\/");
}
if (n >= 0) {
str = str.substring(n + 1);
}
var d = str.lastIndexOf("\.");
str = str.substring(0, d);
return str;
}
function getFilePath(str) {
var d = str.lastIndexOf("\\");
if (d < 0) {
d = str.lastIndexOf("\/");
}
if (d >= 0) {
str = str.substring(0, d);
}
return str;
}
//添加行
var i = 1;
function addTable_tr(filename, filepath) {
var show = "";
show += "<tr id=\"tr" + i + "\" class=\"row\">";
show += "<td id=\"tdf" + i + "\">" + i + "</td>";
show += "<input type=\"\">";
show += "<td id=\"tdp" + i + "\" class=\"tdp\"><input type=\"text\" id=\"txtp" + i + "\" value=\"" + filepath + "\" name=\"filepath\"/></td>";
show += "<td id=\"tdn" + i + "\" class=\"tdn\"><input type=\"text\" id=\"txtn" + i + "\" value=\"" + filename + "\" name=\"filename\"/></td>";
show += "<td id=\"tdd" + i + "\" class=\"tdd\"><input type=\"text\" id=\"txtd" + i + "\" value=\"" + getDate() + "\" name=\"date\"/></td>";
show += "<td id=\"tdk" + i + "\" class=\"tdk\"><input type=\"checkbox\" id=\"" + i + "\" onclick=\"setRowColor(this)\" name=\"ch\"/></td>";
show += "</tr>";
$("#tbody").append(show);
i++;
setButtonD();
}
//删除选中行
function delete_tr() {
$("input:checkbox[name=ch]:checked").each(function () {
$("#tr" + this.id).remove();
i--;
})
//重新更新各项的id
$('tr').each(function (trIndex, tr) {//更新tr的id
tr.id = tr.id.replace(/\d+$/, '') + (trIndex + 1).toString();
$(tr).find('td').each(function (tdIndex, td) {//更新td的id及input的id
td.id = td.id.replace(/\d+$/, '') + (trIndex + 1).toString();
if (tdIndex > 0) td.firstChild.id = td.firstChild.id.replace(/\d+$/, '') + (trIndex + 1).toString(); //更新input的id
else td.innerHTML = trIndex + 1;
});
});
setButtonD();
}
//设置被选中行的颜色
function setRowColor(obj) {
var chk = document.getElementById(obj.id);
if (chk.checked) {
$("#tr" + obj.id).css("background-color", "red");
} else {
$("#tr" + obj.id).css("background-color", "");
}
}
//获取系统当前日期
function getDate() {
var date = new Date();
var year = date.getYear();
var month = date.getMonth() + 1;
var da = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (da < 10) {
da = "0" + da;
}
var str = year + "." + month + "." + da;
return str;
}
//设置按钮可用性
function setButtonD() {
//获取行tbody下面的class=row的集合（删除后）
var tr_rowCount = $("#tbody").find(".row");
if (tr_rowCount.length <= 0) {
$("#btnS").attr("disabled", true);
$("#btnD").attr("disabled", true);
} else {
$("#btnS").attr("disabled", false);
$("#btnD").attr("disabled", false);
}
}
</script>
</head>
<body onload="setButtonD();">
<form id="form1" runat="server">
<div>
<input type="hidden" id="hidrow"/>
<input type="button" id="btnB" value="浏览" onclick="getFile();" />
<div style="display:none">
<input type="file" id="fileId"/>
</div>
<br />
<input type="button" id="btnS" value="显示" onclick="" />
<br />
<input type="button" id="btnD" value="删除" onclick="delete_tr();" />
<br />
<input type="button" id="btnAdd" value="添加" onclick="" />
<table border="2px solid red">
<tbody id="tbody">
</tbody>
</table>
</div>
</form>
</body>
</html>
