閱讀515 返回首頁    go 阿裏雲 go 技術社區[雲棲]


JS判斷FileUpload上傳類型

 

<head runat="server">
    <script type="text/javascript">
        function Judge() {

            // 獲取上傳文件名
            var fileupload = document.getElementByIdx_x("FileUpload1");
            var filename = fileupload.value;

           // 獲取該文件名的後綴名
           var extend = filename.substring(filename.lastIndexOf(".") + 1);

            // 上傳文件提示信息
            var hint = document.getElementByIdx_x("hint");

            if (extend == "") {
                hint.innerHTML = "<span style='color:red'>上傳文件不能為空</span>";
            }
            else if (extend != "doc") {
                hint.innerHTML = "<span style='color:red'>必須上傳word格式文件</span>";
    

                // 清空上傳文件控件的值
               fileupload.outerHTML = fileupload.outerHTML
            }
            else if (extend == "doc") {
                hint.innerHTML = "";
            }
        }
    </script>
</head>

<body>
    <form runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server"/>
        <input type="button" value="上傳" />
        <div ></div>
    </div>
    </form>
</body>
</html>

 

1.關於如何用腳本修改fileupload控件值的問題,

開發環境vs2005,在上傳文件時,需要一個取消的按鈕來清空type=file的value,而且這個頁麵上有多個file控件

這個比較麻煩因為file的值本身是不允許用腳本修改的(安全角度考慮)

 

方法1.使用腳本把這個file的input移動到一個form中,然後調用reset,如果有多個這樣的input當然還要再移出來.這個方法我不會采用,因為對.net開發者

來講習慣了一個頁麵就一個form所有控件都在其中.

 

方法2.這個方法有點投機,就是在腳本中調用
var fileup = document.getElementById(fileid);
fileup.outerHTML = fileup.outerHTML; 這個ie對腳本處理以及展現機製有關

 

方法3.這個主要是在解決ff上的問題時考慮到的,其實就是重新生成了一個id相同的file,這裏要注意 name一定也要賦值,否則是很難提交給服務器接受的

 

 

在平時項目開發中會有上傳文件的功能,一般在前端會通過JS來判斷上傳文件是否屬於指定的文件類型,如果不屬於就將控件值清空! (當然你也可以不清空)

有一種方法可以很簡單的裝文件上傳組件的值清空,代碼如下:
var file=document.getElementById("form1:fileupload");
file.outerHTML=file.outerHTML

 

以上方法之能在IE中使用

為了兼容FireFox我們使用下麵的方式來清空fileupload控件的值:

<span id='uploadSpan'>
<input type="file">
</span>
<script language="JavaScript">
var html=document.getElementById('uploadSpan').innerHTML;

function resetFile()

{
document.getElementById('uploadSpan').innerHTML=html;
}
</script>
這樣就行了,各瀏覽器都支持的

 

 

參考地址:https://www.cnblogs.com/jhxk/articles/1667803.html

最後更新:2017-04-02 22:15:58

  上一篇:go Js修改fileupload控件值的問題
  下一篇:go display屬性的block,inline和inline-block