<!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;
}
|
7503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
