javascript对上传文件的相关操作

大多数网站都有很多涉及文件上传的需求，例如：一些SNS网站为了让用户更加形象化，会让用户自定义上传头像文件。现在介绍一些关于javascript操作上传文件的方法，包括限制上传文件的格式、获取上传文件的大小、清空上传文件、多文件上传等。

浏览器内置的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>