添加
    
      
                
          
                    
           
                
          
            
【删除图片】 

//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;

}