<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>get file input full path</title>
<style>
.case_photo_area_small {
width: 770px;
overflow:hidden;
}
.small_photo {
border-top: 2px #BFBFBF solid;
border-right: 2px #BFBFBF solid;
border-left: 2px #BFBFBF solid;
border-bottom: 2px #BFBFBF solid;
}
.small_photo_selected {
border-top: 2px #FFCC00 solid;
border-right: 2px #FFCC00 solid;
border-left: 2px #FFCC00 solid;
border-bottom: 2px #FFCC00 solid;
}
</style>
<script type="text/javascript" language="javascript"
src="native_picture.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody id="_container">
<tr>
<td><input type="file" id="FileUpload1" name="FileUploads"
onchange="getFullPath(this,'FileUpload1',true);" /> <a
href="javascript:void(0);" onclick="addFile()">添加</a></td>
</tr>
</tbody>
</table>
<table border=0 cellspacing=0 cellpadding=0 style="display: none;"
id="tableImg">
<tr>
<td><img id="beforeX" src="images/left.png"></td>
<td>
<div class="case_photo_area_small" id="showareX">
<table border=0 cellspacing="1px" cellpadding=0>
<tr id="_newPreview"></tr>
</table>
</div>
</td>
<td><img id="nextX" src="images/right.png"></td>
<td><a href="javascript:void(0);" id="deleThisImg">【删除图片】 </a></td>
</tr>
</table>
</body>
</html>
//native_picture.js
var id = 0;
function addFile() {
var tab = document.getElementById("_container");
var row = document.createElement("tr");
var cell = document.createElement("td");
var f = document.createElement("input");
f.setAttribute("type", "file");
f.setAttribute("id", "FileUpload" + (id + 2));
f.setAttribute("name", "FileUploads");
f.setAttribute("contentEditable", false);
cell.appendChild(f);
var btndele = document.createElement("a");
btndele.setAttribute("href", "javascript:void(0)");
btndele.setAttribute("class", "btn2");
btndele.innerHTML = "<span class='toolbar_icon toolbar_icon_07'></span>删除";
btndele.setAttribute("value", "删除");
btndele.setAttribute("Id", "del" + id);
btndele.onclick = function() {
// 删除行
getFullPath(this.parentNode.childNodes[0],
this.parentNode.childNodes[0].getAttribute("id"), false);
while (true) {
if (btndele.tagName == "TD") {
break;
} else {
btndele = btndele.parentNode;
btndele.parentNode.removeChild(btndele);
}
}
};
f.onchange = function() {
getFullPath(this, this.getAttribute("id"), true);
};
cell.appendChild(btndele);
row.appendChild(cell);
tab.appendChild(row);
id++;
}
var goIndex = 0;
var countx = 0;
function getFullPath(obj, fileId, falg) {
//obj：file对象;fileId："FileUpload"+id; falg:ture 添加或更新图片，false 删除图片
var gindex = fileId.substring(10); //取得与file之对应图片id号
var divImg = document.getElementById("divImg" + gindex); // 判断是否含有此id图片
var newPreview = document.getElementById("_newPreview"); //指定TR添加节点
var newPreviewSize = newPreview.childNodes.length; //TR已添加TD数
var index =0; //获得图片索引
if(newPreviewSize>0){
index=getIndex();
}
var patn = /.jpg$|.jpeg$|.bmp$/i; //正则表达式判断上传文件
countx = newPreviewSize;
if (patn.test(obj.value)) {
if (falg && divImg == null) {
var cell = document.createElement("td");
var g = document.createElement("div");
g.setAttribute("id", "divImg" + gindex);
g.style.width = "90px";
g.style.height = "90px";
//指定位置添加图片
if (!newPreview.hasChildNodes()||newPreviewSize==index) {
cell.appendChild(g);
newPreview.appendChild(cell);
goIndex=newPreviewSize-1;
} else {
cell.appendChild(g);
newPreview.insertBefore(cell, newPreview.childNodes[index]);
goIndex=index-1;
}
iephoto(g);
countx++;
nextX();
} else if (falg) {
iephoto(divImg);
if(newPreviewSize==1){
goIndex=0;
}else{
goIndex=index+1;
}
beforeX();
} else {
delephoto();
}
} else if (divImg != null) {
delephoto();
}else{
return false;
}
styleDivImg();
showhidden();
document.getElementById("beforeX").onclick=function(){
beforeX();
styleDivImg();
};
document.getElementById("nextX").onclick=function(){
nextX();
styleDivImg();
};
// 删除选中的图片
document.getElementById("deleThisImg").onclick=function(){
var imgNow =newPreview.childNodes[goIndex].getElementsByTagName("div")[0];
var buttonIndex=parseInt(imgNow.getAttribute("id").substring(6));
var buttonNow =document.getElementById("FileUpload"+buttonIndex);
if(imgNow&&buttonNow){
imgNow.parentNode.parentNode.removeChild(imgNow.parentNode);
//删除button,若为第一个就清空值
if(buttonIndex==1){
//buttonNow.select();
//document.execCommand("delete");
buttonNow.outerHTML=buttonNow.outerHTML;
}else{
while (true) {
if (buttonNow.tagName == "TD") {
break;
} else {
buttonNow =buttonNow.parentNode;
buttonNow.parentNode.removeChild(buttonNow);
}
}
}
countx--;
beforeX();
styleDivImg();
showhidden();
}
};
//图片样式
function styleDivImg(){
for(var j=0;j<countx;j++){
if(j==goIndex)
newPreview.childNodes[j].className="small_photo_selected";
else
newPreview.childNodes[j].className="small_photo";
}
}
//IE浏览器浏览本地DIV图片路径
function iephoto(ie){
obj.select();
ie.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
ie.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
}
//删除图片
function delephoto(){
if(newPreviewSize==1){
goIndex=1;
}else{
goIndex= index;
}
countx--;
divImg.parentNode.parentNode.removeChild(divImg.parentNode);
beforeX();
}
//获取索引
function getIndex(){
var arr = new Array();
var indexg =0;
// document.getElementById("divImg" + jj);
for (var jj = 0; jj < newPreviewSize; jj++) {
var gchild = newPreview.childNodes[jj].getElementsByTagName("div")[0];
arr[jj] = parseInt(gchild.getAttribute("id").substring(6));
}
if(divImg==null&&falg){
arr[newPreviewSize] = gindex;
}
//对数字排序
function sortNumber(a,b)
{
return a - b;
}
arr = arr.sort(sortNumber);
for(var jj=0;jj<arr.length;jj++){
if(arr[jj]==gindex){
indexg=jj;
break;
}
}
return indexg;
}
}
//显示隐藏
function showhidden(){
var tableImg = document.getElementById("tableImg");
if(countx==0){
tableImg.style.display="none";
}else{
tableImg.style.display="block";
}
}
//上一个
function beforeX() {
if (goIndex <= 0) {
goIndex = countx-1;
} else {
goIndex--;
}
document.getElementById("showareX").scrollLeft = (93) * goIndex;
}
//下一个
function nextX() {
if (goIndex+1>=countx) {
goIndex = 0;
} else {
goIndex++;
}
document.getElementById("showareX").scrollLeft = (93) * goIndex;
}
