靈魂-放水

          為學日益,為道日損。

          BlogJava 首頁 新隨筆 聯系 聚合 管理
            296 Posts :: 10 Stories :: 274 Comments :: 0 Trackbacks
          上傳控件(<input type="file"/>)用于在客戶端瀏覽并上傳文件,用戶選取的路徑可以由value屬性獲取,但value屬性是只讀的,不能通過javascript來賦值,這就使得不能通過value=""語句來清空它。很容易理解為什么只讀,如果可以隨意賦值的話,那么用戶只要打開你的網頁,你就可以隨心所欲的上傳他電腦上的文件了,呵呵,畢竟表單的submi是可以隨便調用的。

          而上傳控件又沒有一個clear()之類的函數,所以這使得無刷新上傳文件顯得稍稍不爽,尤其對于追求完美的開發者而言。然而今天在做一個Asp.net控件時卻發現不得不需要清空一下上傳控件,于是便開始想辦法。網上搜索一番,不出所料,沒有找到什么結果。關鍵時刻只能靠自己了。

          仔細想想,上傳控件是不是任何時候都不可能被清空呢?答案是否,form.reset()方法能夠重置所有得表單元素。只要調用inputFile.form.reset(),那么上傳控件的值就清空了,不要擔心它被恢復為某個默認值,value是只讀的,你不能為它設置某個初始值。

          于是開始設想,如果我只需要reset一下上傳控件,怎么解決?其他的表單元素要保持原狀。一個可行的方法是,reset之前獲取所有的表單域的值,之后再用這些值填充,雖然顯得稍微復雜,但借助prototype框架的Form對象提供的方法,還是很容易做到的。這樣就能夠得到需要的結果了。

          然而這個方法還是不夠優雅,沿著思路繼續想下去,不難得到改進的方法:創建一個新的form,把上傳控件臨時放過來,再調用這個form的reset方法,完工之后再把上傳控件弄回去。這個form無需進入DOM結構便能正常工作,所以不用擔心會對界面有任影響。下面給出函數實現,經過驗證工作良好,呵呵。
          //清空文件上傳框
          function clearFileInput(file){
              var form=document.createElement('form');
              document.body.appendChild(form);
              //記住file在舊表單中的的位置
              var pos=file.nextSibling;
              form.appendChild(file);
              form.reset();
              pos.parentNode.insertBefore(file,pos);
              document.body.removeChild(form);
          }
          posted on 2007-04-20 16:06 放水老倌 閱讀(1486) 評論(1)  編輯  收藏 所屬分類: JavaScript

          Feedback

          # re: [轉]如何清空上傳控件()的值 2007-10-12 14:51 bvc
          thanks  回復  更多評論
            

          主站蜘蛛池模板: 洞口县| 西和县| 玉屏| 延边| 垦利县| 华坪县| 伊宁县| 博客| 阿拉善盟| 永年县| 克什克腾旗| 东源县| 乌兰县| 年辖:市辖区| 陆良县| 来宾市| 齐河县| 东丽区| 潼南县| 海伦市| 定日县| 塔河县| 华坪县| 石景山区| 河池市| 五峰| 兴和县| 广德县| 东阿县| 井研县| 绵竹市| 灵武市| 区。| 武清区| 逊克县| 石景山区| 斗六市| 治多县| 汉源县| 全州县| 赤峰市|