zoukankan      html  css  js  c++  java
  • 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字体

  • 相关阅读:
    pod hook 钩子函数 生命周期 lifecycle/postStart/preStop
    yaml基本语法 && 静态pod && pod生命周期 && pod健康检测
    netsh winsock reset
    H3C Password Contrpol
    H3C ssh 配置参考
    win7怎么修复winsock被删除
    pod健康检测 exec/http/tcpSocket
    win10 1709 新装 鼠标卡顿
    shell 标准输入输出及错误输出 重定向
    IP安全策略只允许指定IP连接远程桌面,限制IP登
  • 原文地址:https://www.cnblogs.com/codebook/p/6020632.html
Copyright © 2011-2022 走看看