js 일괄 업로드 인터페이스_양식 특수 효과 구현

1. 빠른 업로드를 위해 플러그인을 다운로드하세요.
2. 제한적으로 업로드하려면 HTML 업로드 컨트롤을 사용하세요.

아래의 함수 2를 자바스크립트 스크립트로 구현해보겠습니다.

1. 업로드 제어를 동적으로 추가합니다.
2. 업로드 컨트롤을 동적으로 삭제합니다.
3. 업로드 제어에서 사용자가 임의로 경로를 입력하는 것을 제한합니다.

<meta http-equiv="content-type" content="text/html"> <title>지역 사진</title> <form method="post" enctype="multipart/form-data"> <table><th>批量上传</th></table> <table> <tr> <td nowrap>名称*</td> <td><input type="text" name="Name" size="15" maxlength="50"></td> <td nowrap>文件路径*</td> <td><input type="file" name="FilePath" size="15" onkeydown="DisabledKeyInput()"></td> <td nowrap>说明*</td> <td> <input type="text" name="Description" size="45"><input type="button" value="增加" onclick="AddMoreRow()"> </td> <td nowrap> <input type="button" id="DelBtn" value="删除" disabled onclick="DeleteMoreRow()"> </td> </tr> </table> <table> <tr align="center"> <td align="center"> <input type="submit" value="保存"> <input type="reset" value="取消"> </td> </tr> </table> </form>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]<script> function AddMoreRow() { var oRow=event.srcElement.parentNode.parentNode; var oTable=oRow.parentNode.parentNode; oNewRow=oTable.insertRow(); for(i=0;i<oRow.cells.length;i++) { oNewRow.insertCell().innerHTML=oRow.cells[i].innerHTML; } oRow.all("DelBtn").disabled=false; oNewRow.all("DelBtn").disabled=false; } function DeleteMoreRow() { var oRow=event.srcElement.parentNode.parentNode; var oTable=oRow.parentNode.parentNode; if(oTable.rows.length>1) { oTable.deleteRow(oRow.rowIndex); if(oTable.rows.length==1) { oTable.all("DelBtn").disabled=true; } } } function DisabledKeyInput() { if(event.keyCode!=8&&event.keyCode!=46) { event.returnValue=false; } } </script>