jquery - Laravel - 图片上传提交表单而不是打开目录文件

Question

在我的 Laravel-5.8 项目中，我有一个多步骤表单。在表单中，我从文件中浏览员工图像并将其上传到表单中，然后再提交整个表单。单击添加员工时，它应该提交表单。

    <form class="tab-wizard wizard-circle form" action="{{ route("hr.employees.store") }}" method="post" enctype="multipart/form-data">

        {{csrf_field()}}

   <!-- Step 1 -->
   <h6>Personal Information</h6>          

    <section> 
     <!--<div class="card-body">-->       
            <div class="text-center">
              <input type="image" class="profile-user-img img-fluid img-circle"
                   src="{{asset('theme/adminlte3/dist/img/default.png')}}"

                    id="wizardPicturePreview" title="" width="150">                   

            <input type="file"  name="emp_image" id="wizard-picture" class="" hidden>
              <h4 class="profile-username text-center">Click On Image to Add Picture</h4>
            </div> 

            <!--<span style="color:blue;"><h4 class="box-title"><b>Personal Information</b></h4></span>-->
            <hr class="m-t-0 m-b-40">  

        <div class="row">
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <!--<label>Minimal (.select2-danger)</label>-->
              <label class="control-label"> First Name:<span style="color:red;">*</span></label>
              <input  type="text" name="first_name" placeholder="Enter first name here" class="form-control" value="{{old('first_name')}}" style="width: 100%;">
            </div>
            <!-- /.form-group -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> Other Name:</label>
              <input  type="text" name="other_name" placeholder="Enter other name here" class="form-control" value="{{old('other_name')}}" style="width: 100%;">
            </div>
            <!-- /.form-group -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
                <label class="control-label"> Last Name:<span style="color:red;">*</span></label>
              <input  type="text" name="last_name" placeholder="Enter last name here" class="form-control" value="{{old('last_name')}}" style="width: 100%;">
            </div>
            <!-- /.form-group -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->

        </section>    

   <button type="submit" id="button" class="btn btn-primary" hidden>Save</button>

Javascript

    <script>
        $(document).ready(function(){
        // Prepare the preview for profile picture
            $("#wizard-picture").change(function(){
                readURL(this);
            });
        });
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }           }
        $("input[type='image']").click(function(e) {
            e.preventDefault();
            $("input[id='wizard-picture']").click();
        });
        $(".form-control").keypress(function(e) {
            if (e.which == 13) {
                e.preventDefault();
                return false;
            }
        });

    </script>
    <script>
        //Custom design form example
        $(".tab-wizard").steps({
            headerTag: "h6",
            bodyTag: "section",
            enableAllSteps: true,
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Add Employee"
            },
            onStepChanged: function (event, current, next) {
                if (current > 3) {
                    $("#save").hide();
                }
                else if( current <=3)
                {
                    $("#save").show();
                }

            },
            onFinished: function (event, currentIndex) {
                $("#button").click();
            },
        });
    </script>

    <script>
        $("input").attr('autocomplete', 'off');
        var $input = $('<button id="save" class="btn text-white" style="margin:0px 0 0 5px;padding:8.2px 12px;background-color:#009efb">Add Employee</button>');
        $input.appendTo($('ul[aria-label=Pagination]'));
        $('#save').click(function(){
            $("#button").click();
        })
    </script>

现在的问题是，当我单击时：

点击图片添加图片

它不是浏览图像，而是提交表单。

我该如何解决这个问题？

谢谢你。

标签： jquerylaravel