zoukankan      html  css  js  c++  java

  • 批量预览本地图片

    复制代码
    <!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;
    }
  • 相关阅读:
    Lock、synchronized和ReadWriteLock，StampedLock戳锁的区别和联系以及Condition
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十一）：集成 Shiro 框架
    Spring Cloud之路：（七）SpringBoot+Shiro实现登录认证和权限管理
    XSS过滤JAVA过滤器filter 防止常见SQL注入
    shiro jwt 构建无状态分布式鉴权体系
    JSON Web Token 入门教程
    C#实现WinForm DataGridView控件支持叠加数据绑定
    C#实现WinForm窗体逐渐显示效果
    定义通用的可通过lambda表达式树来获取属性信息
    C#实现通用数据过滤窗体
  • 原文地址：https://www.cnblogs.com/jpfss/p/7372128.html
Copyright © 2011-2022 走看看