첨부 파일 코드를 업로드 JS 동적 추가 삭제

출처: 인터넷
작성자: 사용자
키워드: 웹 페이지 제작 Ajax 자바 스크립트

<! doctype HTML 공개 "-//W3C//DTD XHTML 1.0 전환 / / 엉" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1 transitional.dtd ">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< 헤드 >
< 메타 http-equiv = "content-type" 내용 = "text/html; charset = gb2312 "/ >
< 제목 > 웹 페이지 특수 효과 동적 삭제 증가 업로드 첨부 파일 코드 < / 타이틀 >
</헤드 >

< 몸 >

JS 구현 여러 업로드 첨부
파일 필드 코드 < 유형 스타일 = "텍스트/css 자습서" >. {글꼴: 10pt; 색상: 검정;} 파일 < / 스타일 >
< sc Ript 언어 "웹 효과" = AddFile () {

함수 var filediv = document.all [' Filediv '];
var strhtml = ' < 스팬 >< 입력 유형 = '파일' > & n b s p; & nbsp; < 단추 onclick = "RemoveFile (자세한);" > < 삭제 / 버튼 >< br >< / 스팬 > ';
filediv.innerhtml + = strhtml;
}

함수 removefile (obj) {
Obj.removenode (TRUE);
}
< / 스크립트 & gt
< 형성 enctype = "여러 부분/폼-데이터"
< div ID"Filediv" = >< / div & gt
< a href = javascript:void (AddFile ()); "클래스 =" 파일 "> 추가 첨부 < /a >
< / 양식 > 첨부 모드 동적 증가 업로드 첨부 파일 코드를 추가 하는 //method 2 Hotmail 사서함 같은

< div id = "파일" >
< div >
< 입력 유형 단추 onclick = "추가 ();" = 값 = attacthment >


< 스크립트 >
var html = "< 입력된 이름 = 제목 유형 파일 = >< 입력 유형 버튼 값 = = 삭제 onclick =" 제거 (이) ">";
기능 추가)
{
var o=document.all["files"];
var div=document.createelement ("div");
div.innerhtml=html;
O.appendchild (DIV);
Div.childnodes[0].click ();
}
기능 제거 (obj)
{
Obj.parentelement.parentelement.removechild (obj.parentelement);
}
</스크립트 >
방법 3 js 동적 증가 삭제 업로드 첨부 파일 코드

< 스타일 형식을 "Text/css" = > {글꼴: 10pt; 색상: 검정;} 파일 < / 스타일 >
< 스크립트 언어 = "자바 스크립트" >
var i = 0;
함수 AddFile () 없음
i + +;

Currrow=conditiontable.insertrow ();
Cellc=currrow.insertcell ();
cellccontext = ' < 입력 유형 "파일" 이름 = "파일 +" + i = > & nbsp; & nbsp; < 단추 onclick = "RemoveFile ();" > 제거 < / 버튼 >< br > ';
Cellc.innerhtml=cellccontext;

}
기능 Findtd (o) 없음
경우 (o.nodename== "TR" | | o.nodename== "테이블") 반환;
경우 (o.nodename== "TD")
반환 (o);
다른
(o.parentelement) 반환;
}
함수 RemoveFile () 없음
o = Findtd (event.srcelement);
경고 (o.parentelement.rowindex*1);
Conditiontable.deleterow (o.parentelement.rowindex*1);

}
함수 UploadFile () 없음

}


</스크립트 >
< 형성 enctype = "여러 부분/폼-데이터" >
<는 href = "Javascript:void (AddFile ());" 클래스 "파일" = > 첨부 < /a >< 추가는 href = "Javascript:void (UploadFile ());" 클래스 = "파일" > < /a > 첨부 파일 업로드
< div id = "Filediv" style = ' 높이: 150px; 가기: 150px; 왼쪽: 0px; 오버플로-x: 자동; 오버플로-y:auto; 국경-너비: 1pt; 국경-색상: 블랙; ' >
< 테이블 id conditiontable 국경 = 1 = >
</테이블 >
< / div >

</양식 >
</바디 >
< / html >

관련 문서

연락처

이 페이지의 내용은 인터넷에서 가져온 것이므로 Alibaba Cloud의 공식 의견이 아닙니다.이 페이지에서 언급 된 제품 및 서비스는 Alibaba Cloud와는 관련이 없으므로이 페이지의 내용이 골칫거리 인 경우 저희에게 알려주십시오. 우리는 5 일 근무일 이내에 이메일을 처리 할 것입니다.

커뮤니티에서 표절 사례를 발견한 경우 info-contact@alibabacloud.com 으로 관련 증거를 첨부하여 이메일을 보내주시기 바랍니다. 당사 직원이 영업일 기준 5일 내에 연락 드리도록 하겠습니다.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.