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字体