input type=file 限制上传文件的格式

最近一个项目,要求用户上传文件时必须为docx 文件,不支持txt 及上传图片,下面贴出代码,希望大家需要时直接拿去取用,写的不好或者不对的地方希望大家指出来

html 部分:

                                <input type='text' name='textfield' id='textfield' class='txt' placeholder="选择文件" />
                                <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
                                <input type='hidden' id='docUrl'  />
                            </div>
                        </div>

此处的οnchange=“document.getElementById(‘textfield’).value=this.value” 是为了显示用户上传文件后显示文件的地址效果如下图
此处显示用户上传的文件所在的地址
js 代码部分
$("#fileField").change(function () {
var file = this.files[0];
arr.push(file);
if (file.size > 10 * 1024 * 1024) { //限制上传文件的 大小,此处为10M
alert(“你选择的文件太大了！”);
return false;
}
var type=this.value.toLowerCase().split(’.’).splice(-1); //获取上传的文件的后缀名
if (type[0]!=“docx”&&type[0]!=“doc”) { //只能上传doc,docx 格式的文件
layer.msg(“文件必须为word文档!”, {icon: 2});;
document.getElementById(‘textfield’).value=’’; //如上传的文件格式不符合要求,文件显示部分不显示
return false;
}

    var reader = new FileReader();
    //读取文件过程方法
    reader.onerror = function (e) {
        console.log("文件读取异常....");
        alert('文件上传异常请关闭重试....');
    };
    reader.onabort = function (e) {
        console.log("文件读取异常....");
        alert('文件上传异常请关闭重试....');
    };
    reader.onload = function (e) {
        $("#docUrl").val(e.target.result);
    };
    reader.readAsDataURL(file);
});