批量预览本地图片

复制代码
<!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;
}

 

posted @ 2017-08-16 10:46  星朝  阅读(498)  评论(0)  编辑  收藏  举报