瀏覽器內建的file型input元素在表單提交時，會完成向後臺傳輸檔案的整個過程，這個例子不關注後臺邏輯，只關注前端業務，但是記得不要丟掉enctype="multipart/form-data"。

<form id='fileUpload' enctype="multipart/form-data">
    <p><input type="file" name='file1' id='filedemo1'> </p>
    <input type="button" id='addFileUpload' value="新增">
    <input type="button" id='clearFileUpload' value="清空">
    <input type="button" id='fileUploadSub' value="上傳">
</form>

<script type="text/javascript">
    window.onload = function(){
        uploadCount = 1;//增加的檔案“input”標示符


        isIE = function(){//是否是ie
            return document.all ? true : false;
        }


        getFileSize = function(_f){//獲取檔案大小
            var _fileSize = 0;
            if (this.isIE() && !_f.files) {
                var filePath = _f.value;
                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");


                if(!fileSystem.FileExists(filePath)){
                    return 0;
                }
                var file = fileSystem.GetFile (filePath);
                _fileSize = file.Size;
            } else {
                _fileSize = (_f.files[0] && _f.files[0].size) || 0;
            }
            return _fileSize;
        }


        fileType = function(_eForm, types){//限制上傳檔案的格式
            var _elements = _eForm.elements,
                    _elementsLen = _elements.length
            _ei = null,
                    _v = "",
                    _contentType = "",
                    i = 0;
            for (; i < _elementsLen ; i++){
                _ei = _elements[i];
                if(_ei.type == "file"){
                    //var _i = _ei.value.lastIndexOf("\\");
                    _v = _ei.value,
                            _contentType = _v && _v.match(/^(.*)(\.)(.{1,8})$/)[3];


                    if(!_v || types.search(_contentType) != -1){//如果檔案上傳為空或者型別為限制類型則返回false
                        return false;
                    }
                }
            }
            return true;
        }


        clearFile = function(_eForm){//清空input為file的ui
            var _elements = _eForm.elements,
                    _elementsLen = _elements.length,
                    _ei = null,
                    i = 0;
            for (; i < _elementsLen ; i++){
                _ei = _elements[i];
                (_ei.type == "file") && ((isIE() && (_ei.outerHTML = _ei.outerHTML)) || (_ei.value = ""));//如果為IE，利用其特性清空file文字資料，否則直接將value設定為空值
            }
        }


        fileUpload = function(){//上傳檔案的相關業務
            var _fileUpload = document.getElementById("fileUpload"),
                    _addFileUpload = document.getElementById("addFileUpload"),
                    _clearFileUpload = document.getElementById("clearFileUpload"),
                    _filedemo1 = document.getElementById("filedemo1"),
                    _fileUploadSub = document.getElementById("fileUploadSub");
            _fileUploadSub.onclick =function(){
                alert("測試獲取檔案大小：" + getFileSize(_filedemo1));//獲取上傳檔案的大小
                if(!fileType(_fileUpload, "text")){//限制上傳檔案的格式 ---引數（上傳檔案的表單物件， 被限制的格式）
                    return;
                }
            }


            _clearFileUpload.onclick =function(){//清除上傳檔案的內容
                clearFile(_fileUpload);
            }


            _addFileUpload.onclick =function(){//動態多檔案上傳，新增上傳檔案元素
                uploadCount++;
                var  _input=document.createElement("input"),
                        _pE=document.createElement("p");
                _input.name="filedemo"+uploadCount;
                _input.id="filedemo"+uploadCount;
                _input.type="file";
                _pE.appendChild(_input);
                _fileUpload.insertBefore(_pE,document.getElementById("addFileUpload"));
            }
        }
        fileUpload();
    };
</script>