zoukankan      html  css  js  c++  java
  • jquery.form.js提交 input file中的文件

    现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件,解决方案:

    下面说说 jquery.form.min.js 插件,它是一款优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交。jquery.form.min.js 有两个核心方法ajaxForm()和ajaxSubmit(),下面以实例来简单说明其提交file文件方式:

    	<!-- Modal:更新授权 -->
    	<div class="modal fade" id="update-authorization-modal" tabindex="-1" role="dialog"
    		aria-labelledby="exampleModalLabel" aria-hidden="true">
    		<div class="modal-dialog" role="document">
    			<div class="modal-content">
    				<div class="modal-header">
    					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    						×
    					</button>
    					<h4 class="modal-title"> 更新授权 </h4>
    				</div>
    				<form id="update-authorization-modal-form" class="form-horizontal" action="">
    					<div class="modal-body">
    						<div class="form-group row">
    							<label
    								class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-right">授权文件:</label>
    							<div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
    								<div class="file-input-container">
    									<input type="file" class="form-control file-input"
    										id="update-authorization-modal-file" name="updateAuthorizationModalFile" />
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="modal-footer">
    						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    						<button type="submit" class="btn btn-success">发送</button>
    					</div>
    				</form>
    			</div>
    		</div>
    	</div>
    

      

    <script src="./static/libs/jquery-form/jquery.form-3.45.0.js"></script>
    

      

    $('#update-authorization-modal-form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded: [":disabled"],
        fields: {
            updateAuthorizationModalFile: {
                message: '授权文件无效',
                trigger: "change",
                validators: {
                    notEmpty: {
                        message: '授权文件不能为空'
                    },
                    file: {
                        extension: 'war,rar,tar,zip,gz,bz2,deb',
                        mimeTypes: '.war,.rar,.tar,.zip,.gz,.bz2,.deb',
                        message: '文件类型为.war、.rar、.tar、.zip、.gz、.bz2、.deb'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        e.preventDefault();
        var options = {
            url: '/bmpf/softmng/software/add_software_package/',
            success: showResponse,
            dataType: "json"
        };
        function showResponse(response, status) {
            if (response.ret) {
                toastr.success("更新授权成功", "成功提示");
                $('#update-authorization-modal-form')[0].reset();
                $('#update-authorization-modal-form').data("bootstrapValidator").resetForm();
                setTimeout(function () {
                    $("#update-authorization-modal").modal("hide");
                }, 1000);
                //$softTable.bootstrapTable("refresh");
            }
            else {
                toastr.error(response.errMsg, "错误提示");
                $('#update-authorization-modal-form').bootstrapValidator('disableSubmitButtons', false);
            }
        }
        $('#update-authorization-modal-form').ajaxForm(options);
    });
    

      

  • 相关阅读:
    struts2 s:if 的字符串比较问题
    struts2 标签
    servlet filter
    div滚动与控制
    页面定位
    linux下编译利用CMakeLists.txt 编译C++写的opencv程序
    yolo image.c
    强制杀进程
    PDB GDB 调试代码
    YOLOv3的Darknet在OpenCV3.4.1(bug)下编译出错填坑
  • 原文地址:https://www.cnblogs.com/samve/p/12331625.html
Copyright © 2011-2022 走看看