ajaxForm上传文件到本地服务器(封装)

不啰嗦,直接看代码

1.html:

 <div class="con-item fix">
        <span class="f">文章封面<sup style="color: red"> *</sup></span>
        <div class="f con-item-img">
            <form method="post" enctype="multipart/form-data" id="Form_1" action="">
                <div class="upload-img">
                    <i ng-show="!infoModel.cover" class="ti-plus"></i>
                    <img ng-if="infoModel.cover" ng-src="{{infoModel.cover}}"/>
                    <input type="file" class="btn-file" id="input_1" name="file"/>
                </div>
            </form>
        </div>
    </div>

2.js封装ajaxForm:(用flag判断是因为当页面中有多个上传按钮时,让每一个form只初始化一次,如果不做判断chenge事件和submit事件会绑定多次,结果就会提交多次)

var upLoadImage = {
    inputIdArr : [],
    formIdArr : [],
    start : function(formId, inputId, showRequest, callback){
        
        var options = {
            url : api.API_UP_LOAD_FILE,
            beforeSubmit:  showRequest,  //提交前处理
            success : callback,
            resetForm: true,
               dataType:  'json'
        };

        var flag = true;
        for(var i = 0; i < this.inputIdArr.length; i++)
        {
            if(this.inputIdArr[i] == inputId)
            {
                flag = false;
                break;
            }
        }
        if(flag) //相同的ID只綁定一次事件
        {
            $("#" + inputId).change(function(){
                $("#" + formId).submit();
            });
            this.inputIdArr.push(inputId);
        }
        
        var formFlag = true;
        for(var j = 0; j < this.formIdArr.length; j++)
        {
            if(this.formIdArr[j] == formId)
            {
                formFlag = false;
                break;
            }
        }
        if(formFlag)
        {
            $("#" + formId).ajaxForm(function(){});

            $("#" + formId).submit(function(){
            
                $(this).ajaxSubmit(options);
                return false;
            });
            this.formIdArr.push(formId);
        }
    },
}

3.调用方法

upLoadFile: function(){

        upLoadImage.start("Form_1", "input_1",
            function(formData) { //表单提交前被调用的回调函数
                var file = formData[0].value.type; //formData是表单文件的一个数组

                if (!/\/(?:jpg|png|bmp|pdf|mp4|MOV)/i.test(file)){   //这里可以限定上传文件格式
                    alert("格式不正确!");

                    $("#input_1").val(""); //如果不成功就清空文件域,tip:在IE中安全设置的原因不允许清空文件域

                    return false; //如果“beforeSubmit”回调函数返回false,那么表单将不被提交
                }
            },
            function(responseText, statusText) { //表单提交成功后调用的回调函数
                if(statusText == "success")
                {
                    UpLoadCtrl.upLoadModel.pdfURL = responseText.data.url;
                    UpLoadCtrl.scope.$apply();
                }
            }
        )
    }

4.注:项目使用了angular js和themify字体

posted @ 2016-11-01 19:00  小方块的世界  阅读(1863)  评论(0编辑  收藏  举报