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

  • 相关阅读:
    LYDSY模拟赛day3 序列
    LYDSY模拟赛day3 涂色游戏
    LYDSY模拟赛day3 平均数
    hdu1757 A Simple Math Problem
    清北国庆day1 (脑)残
    poj3070 Fibonacci
    uva10870 递推关系Recurrences
    湖南附中模拟day1 瞭望塔
    湖南附中模拟day1 收银员
    湖南附中模拟day1 金坷垃
  • 原文地址:https://www.cnblogs.com/codebook/p/6020632.html
Copyright © 2020-2023  润新知