2. 程式人生 > >關於Html動態新增上傳檔案控制元件inputFile（附件）及清除已選擇的檔案的幾個方法

關於Html動態新增上傳檔案控制元件inputFile（附件）及清除已選擇的檔案的幾個方法

阿新 • • 發佈：2019-01-10

一、動態新增上傳檔案控制元件

  1.   案例一：

  1. <HTML>
  2. <HEAD>
  3. <TITLE>上傳檔案</TITLE>
  4. <SCRIPTlanguage=javascripttype=text/javascript>
  5.         <!--
  6.             var RES_BT_DELETE = "刪除";
  7.             var isIE = (navigator.userAgent.indexOf("MSIE") != -1);
  8.             var fileIndex = 0;
  9.             function addFile() 
  10.             {
  11.                 var spanId = "filespan";
  12.                 var fileId = "uploadfile" + (fileIndex++);
  13.                 addInputFile(spanId, fileId);
  14.             }
  15.             function addInputFile(spanId, fileId) 
  16.             {
  17.                 var span = document.getElementById(spanId);
  18.                 if (span != null) 
  19.                 {
  20.                     var divObj = document.createElement("div"), fileObj, delObj;
  21. divObj.id = fileId;
  22.                     if (isIE) 
  23.                     {
  24. fileObj = document.createElement("<inputtype=fileonchange=changeFile(form)>");
  25. delObj
     = document.createElement("<inputtype=buttononclick=delInputFile('" + spanId + "','" + fileId + "')>");
  26.                     } 
  27.                     else 
  28.                     {
  29. fileObj = document.createElement("input");
  30. fileObj.type = "file";
  31.                         fileObj.setAttribute("onchange", "changeFile(form)", 0);
  32. delObj = document.createElement("input");
  33. delObj.type = "button";
  34.                         delObj.setAttribute("onclick", "delInputFile('" + spanId + "','" + fileId + "')", 0);
  35.                     }
  36. fileObj.name = fileId;
  37. fileObj.size = "40";
  38. fileObj.className = "input";
  39. delObj.value = RES_BT_DELETE;
  40.                     divObj.appendChild(fileObj);
  41.                     divObj.appendChild(document.createTextNode(" "));
  42.                     divObj.appendChild(delObj);
  43.                     span.appendChild(divObj);
  44.                 }
  45.             }
  46.             function delInputFile(spanId, fileId) 
  47.             {
  48.                 var span = document.getElementById(spanId);
  49.                 var divObj = document.getElementById(fileId);
  50.                 if (span != null && divObj != null) 
  51.                 {
  52.                     span.removeChild(divObj);
  53.                 }
  54.             }
  55.         //-->
  56. </SCRIPT>
  57. <METAcontent="MSHTML 6.00.2800.1528"name=GENERATOR>
  58. </HEAD>
  59. <BODYclass=pagebackground>
  60. <FORMid=formaction=XXXmethod=postencType=multipart/form-data>
  61. <TABLEclass=dialog1height=20cellSpacing=1cellPadding=8width="90%"align=center>
  62. <TBODY>
  63. <TR>
  64. <TD noWrap>通過檔案上傳: </TD>
  65. <TDid=filespan noWrap>
  66. <INPUTclass=inputtype=filesize=40name=file>
  67. <INPUTid=btnAddonclick=addFile() type=buttonvalue=新增>
  68. </TD>
  69. </TR>
  70. </TBODY>
  71. </TABLE>
  72. </FORM>
  73. </BODY>
  74. </HTML>

  2. 案例二：

  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
  4. <title>新建網頁 1</title>
  5. </head>
  6. <body>
  7. <scriptlanguage=JavaScript>
  8.             function fAddAttach()
  9.             {
  10.                var gAttchHTML='<div class="qrle text2">附件：</div><div class="le"><input type="file" name="attachfile[]"  class="bot3" ></div><div class="le"><input type="button" name="Submit" value=" 刪除 " class="bot2" id="btnDeleteReadAttach"  /></div><span></span>';
  11.                var Attach=document.getElementById("dvReadAttach");
  12.                var spnList=Attach.getElementsByTagName("SPAN");
  13.                var spn=document.createElement("DIV");
  14. spn.className="qrc4";
  15. spn.innerHTML=gAttchHTML;
  16.                spn.childNodes[1].childNodes[0].name="attachfile[]" + spnList.length;
  17.                Attach.appendChild(spn);
  18.                fGetObjInputById(spn,"btnDeleteReadAttach").onclick=function(){fDeleteAttach(this);};
  19.                document.getElementById("aAddAttach").innerHTML="繼續新增附件";
  20. Attach.style.display="";
  21.                if(spnList.length>1)
  22.                {
  23.                  spn.childNodes[0].innerHTML="   ";
  24.                }
  25.             }
  26.             function fGetObjInputById(obj,id)
  27.             {
  28.                var inputList=obj.getElementsByTagName("INPUT");
  29.                for(var i=0;i<inputList.length;i++)
  30.                {
  31.                  if(inputList[i].id==id)
  32.                  {
  33.                     return inputList[i];
  34.                  }
  35.                }
  36.                return null;
  37.             }
  38.             function fDeleteAttach(obj)
  39.             {
  40.                 try
  41.                 {
  42.                     obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
  43.                     var Attach=$("dvReadAttach");                       
  44.                     var spnList=Attach.getElementsByTagName("SPAN");
  45.                     if(spnList.length==0)
  46.                     {
  47.                          document.getElementById("aAddAttach").innerHTML="新增附件";
  48. Attach.style.display="none";
  49.                     }
  50.                     else
  51.                     {
  52.                         document.getElementById("aAddAttach").innerHTML="繼續新增附件";
  53.                     }
  54.                 }
  55.                 catch(exp)
  56.                 {
  57.                     //fDebug("fDeleteAttach",exp.description);
  58.                 }
  59.             }
  60. </script>
  61. <BODYBGCOLOR=WHITE>
  62. <ahref="javascript:fAddAttach();"id="aAddAttach">新增附件</a>
  63. <divid="dvReadAttach"style="display:none">
  64. </BODY>
  65. </body>
  66. </html>

二、清空inputFile的內容

  1. 方法一：

  1. <FORMname=form1>
  2. <inputtype="file"name=f>
  3. <inputtype=buttonvalue=resetonclick="f.select();document.execCommand('delete')">
  4. </FORM>

  2. 方法二：

  1. <FORMname=form1>
  2. <inputtype="file"name=f>
  3. <inputtype=buttonvalue=resetonclick="form1.f.outerHTML='<input type=/'file/' name=/'f/'>'">
  4. </FORM>

相關推薦

關於Html動態新增上傳檔案控制元件inputFile（附件）及清除已選擇的檔案的幾個方法

一、動態新增上傳檔案控制元件   1.   案例一： <HTML> <HEAD> <TITLE>上傳檔案</TITLE> <SCRIPTlanguage=javascripttype=text/javascript>

javaweb 簡單的檔案上傳動態新增上傳檔案數量[從學習到工作(六)]

    1.jsp頁面主要程式碼塊  <script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script> <form actio

JS動態新增上傳檔案按鈕

<script language="javascript"> var i = 0; var maxTime = 10;//最大次數 function addFile() {

將HTML頁面自動儲存為PDF檔案並上傳的兩種方式（一）-前端（react）方式

一、業務場景 　　公司的樣本檢測報告以React頁面的形式生成，已調整為A4大小的樣式並已實現分頁，業務上需要將這個網頁生成PDF檔案，並上傳到伺服器，後續會將這個檔案傳送給客戶（這裡不考慮）。 二、原來的實現形式 　　瀏覽器原生方法：window.print()可以將網頁儲存為PDF檔案，由於檢測報告

vb上傳下載控制元件Inet-FTP使用大全

1、利用Inet控制元件上傳檔案 　　 格式：inet1.execute , "put 本地檔案 遠端檔案" 　　範例： 　　'初始化Inet控制元件 　　Inet1.Protocol = icFTP 　　Inet1.URL = "ftp://u050

vb動態新增和刪除PictureBox控制元件

Option ExplicitPrivate WithEvents NewPicture As PictureBox'通過使用WithEvents關鍵字宣告一個物件變數為新的命令按鈕 Private Sub Command1_Click() '這個按鈕用來新增新控制元件If

Android 在程式中動態新增 View 佈局或控制元件

有時我們需要在程式中動態添加布局或控制元件等，下面用程式來展示一下相應的方法： 1、addView 新增View到佈局容器 2、removeView 在佈局容器中刪掉已有的View 3、LayoutParams  設定View的大小位置   下面來看一個demo； pu

介紹一個QQ傳送圖片上傳的控制元件

       如果你的應用中用到了傳送圖片這樣的功能那麼能夠像QQ發圖片那樣有個類似進度條的效果是很不錯的。現在就給大家介紹一個可以實現這樣效果的控制元件。        先說一下思路，首先顯示圖片我們一般用ImageView，這裡也是繼承ImageView，但是Image

HTML5關於上傳API的一些使用（下）

頁面 end type=file ajax flash 文件名 方式 小文件 圖片壓縮 通過前面兩篇的分享，我們已經搞定了單個文件的普通的上傳，包括文件預覽，圖片預覽，上傳速度等前端界面的顯示，這次我們來談談關於>XMLHttpRequest2.0在界面之後假如才用

summernote上傳圖片保存路徑（C#）

logs new 如果 com 失敗 ase sdn form || 1.寫一個div，ID為Content 1 <div id="Content" class="summernoteContent"> 2 3 </div> 2.讓其成為富文本

spring cloud實戰與思考（三） 微服務之間通過fiegn上傳一組文件（下）

ets inf str ceo iter protected let pan ins 需求場景： 　　用戶調用微服務1的接口上傳一組圖片和對應的描述信息。微服務1處理後，再將這組圖片上傳給微服務2進行處理。各個微服務能區分開不同的圖片進行不同處理。 　　上一篇博客已經討

自定義控制元件之下載控制元件1（DownloadView1）

前段時間在乾貨集中營看到了兩個炫酷的下載按鈕：       可惜是隔壁 iOS 的孩子，怎麼辦，我也好喜歡，emmm，某該，只能自己模仿著實現一下了。先從第一個入手（第二個波浪效果暫時還不會）。 1 準備動作 寫過幾次自定義控制元件

Winform DevExpress控制元件庫（二） 使用SplashScreenManager控制元件定製程式載入頁面

SplashScreenManager控制元件：主要作用是顯示在進行耗時操作時的等待介面；   位於 工具箱 -> Navigation & Layout（導航欄與佈局類控制元件） 目錄下；   在工具箱輸入名稱SplashScreenManager檢索，然後直接拖拽

溫故而知新 前端日誌上傳新姿勢 navigator.sendBeacon（信標）

print date int cti get請求 stringify win str ont 原文地址：https://mp.weixin.qq.com/s/-moAfEZicrFmun4qfWLdOQ 簡單示例js： var data = JSON.stringif

【Unity3D BezierCurve繪製曲線】動態新增路徑點繪製可調節曲線（三維空間）

近日，專案需求：前提：三維空間 1.動態新增（刪除）路徑點，通過兩個以上的路徑點來繪製曲線，刪除點之後不影響其他點繪製曲線； 2.每個路徑點都可以被拖拽發生位移，可以通過鎖定某個軸，使該軸不發生位移； 3.每個路徑點處有兩個可調節點（首尾只有一個調節點），可通過調節點來調節曲線切線（

winform控制元件縮寫 （集合）

winform控制元件縮寫 （集合） 文章內所有的控制元件都是博主從網上辛苦整理出來的，希望對大家有用 winform控制元件縮寫（一）標準控制元件：https://blog.csdn.net/qq_36051316/article/details/83831544 winf

winform控制元件縮寫（七）印刷

winform控制元件縮寫（七）印刷 序號 縮寫 空間名 1 psd PageSetupDialog 2 prd Pr

winform控制元件縮寫（六）元件

winform控制元件縮寫（六）元件 序號 縮寫 空間名 1 bgw BackgroundWorker 2 dre D

winform控制元件縮寫（五）對話方塊

winform控制元件縮寫（五）對話方塊 序號 縮寫 空間名 1 cld ColorDialog 2 fbd Fold

winform控制元件縮寫（四）資料

winform控制元件縮寫（四）資料 序號 縮寫 空間名 1 dts DataSet 2 dgv DataGridVi