Question

我正在尝试发送带有ajax请求的表单以及上传的文件。我的表格：

 <form>

        {{csrf_field()}}
        <div class="form-group">
            <label for="company-name">نام شرکت
            <span class="required">*</span></label>
            <input placeholder="نام شرکت را وارد نمایید"
                   id="company-name"
                   required
                   name="name"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->name}}"
            />
        </div>

        <div class="form-group">
            <lable for="company-size">تعداد کارکنان</lable>
            <span class="required">*</span></label>
            <input placeholder=""
                   id="company_size"
                   required
                   name="company_size"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->company_size}}"
            />
        </div>


        <div class="form-group">
            <lable for="company-website">آدرس وبسایت</lable>
            <span class="required">*</span></label>
            <input placeholder="example.com"
                   id="company-website"
                   required
                   name="website"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->website}}"
            />
        </div>


        <div class="form-group">
            <lable for="company_slogan">شعار استخدامی</lable>
            <span class="required">*</span></label>
            <input placeholder="کنار ما کار کنید"
                   id="company_slogan"
                   required
                   name="slogan"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->slogan}}"
            />
        </div>
        <div class="form-group">
            <lable for="company_logo">لوگوی شرکت</lable>
            <span class="required">*</span></label>
            <input
                    type="file"
                    id="company_logo"
                    required
                    name="logo"
                    class="form-control"
                    value="{{$company->logo}}"
            />
        </div>
        <div class="form-group">
            <lable for="company_message_title">عنوان پیام</lable>
            <span class="required">*</span></label>
            <input placeholder="در یک فضای خلاق در کنار ما باشید"
                   id="company_message_title"
                   required
                   name="message_title"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->message_title}}"
            />
        </div>

        <div class="form-group">
            <lable for="company_message_content">متن پیام</lable>
            <span class="required">*</span></label>
            <textarea id="company_message_content"
                      required
                      name="message_content"
                      spellcheck="false"
                      class="form-control">
                    {{$company->message_content}}
                </textarea>
        </div>

        <div class="form-group">
            <lable for="main_photo">عکس اصلی صفحه</lable>
            <span class="required">*</span></label>
            <input
                    type="file"
                    id="main_photo"
                    required
                    name="main_photo"
                    class="form-control"
                    value="{{$company->main_photo}}"
            />
        </div>

        <div class="form-group">
            <lable for="about_us">درباره ما</lable>
            <span class="required">*</span></label>
            <textarea id="about_us"
                      required
                      name="about_us"
                      spellcheck="false"
                      class="form-control">
                               {{$company->about_us}}
                         </textarea>
        </div>

        <div class="form-group">
            <lable for="why_us">چرا اینجا؟</lable>
            <span class="required">*</span></label>
            <textarea id="about_us"
                      required
                      name="why_us"
                      spellcheck="false"
                      class="form-control">
                             {{$company->why_us}}
                         </textarea>
        </div>

        <div class="form-group">
            <lable for="recruiting_steps">مراحل استخدام</lable>
            <span class="required">*</span></label>
            <textarea id="recruiting_steps"
                      required
                      name="recruiting_steps"
                      spellcheck="false"
                      class="form-control">
                              {{$company->recruiting_steps}}
                        </textarea>
        </div>


        <div class="form-group">
            <lable for="address">آدرس شرگت</lable>
            <span class="required">*</span></label>
            <input placeholder="در یک فضای خلاق در کنار ما باشید"
                   id="address"
                   required
                   name="address"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->address}}"
            />
        </div>

        <div class="form-group">
            <lable for="email">آدرس ایمیل</lable>
            <span class="required">*</span></label>
            <input placeholder="در یک فضای خلاق در کنار ما باشید"
                   id="email"
                   required
                   name="email"
                   spellcheck="false"
                   class="form-control"
                   value="{{$company->email}}"
            />
        </div>

        <div class="form-group">
            <lable for="phone_number">تلفن</lable>
            <span class="required">*</span></label>
            <input
                    id="phone_number"
                    required
                    name="phone_number"
                    spellcheck="false"
                    class="form-control"
                    value="{{$company->phone_number}}"
            />
        </div>

        <div class="form-group">
            <lable for="location">موقعیت</lable>
            <span class="required">*</span></label>
            <input
                    id="location"
                    required
                    name="phone_number"
                    spellcheck="false"
                    class="form-control"
                    value="{{$company->phone_number}}"
            />
        </div>
        <div class="form-group">

            <button id="{{$company->id}}" class="submit" type="button">اعمال 

    تغییرات</button>

        </div>
    </form>

你可以看到我的表格中有两个文件。我处理了剩余的请求：

  <script>
    $('.submit').click( function (e) {
        e.preventDefault();
        var id= $(this).attr('id');
        var mainPhoto= ($('#main_photo').prop('file'));
        var data = {
            "_token": "{{ csrf_token() }}",
            name: $("input[name=name]").val(),
            company_size: $("input[name=company_size]").val(),
            website: $("input[name=website]").val(),
            slogan:$("input[name=slogan]").val(),
            logo:$('input[name=logo]').val(),
            message_title:$('input[name=message_title]').val(),
            message_content:$('#message_content').val(),
            main_photo:mainPhoto,
            about_us:$('#about_us').val(),
            why_us:$('#why_us').val(),
            recruiting_steps:$('#recruiting_steps').val(),
            address:$('#address').val(),
            email:$('#email').val(),
            phone_number:$('#phone_number').val(),
            location:$('#location').val()
        };
        var url = '/companies/' + id ;
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            },
            type: 'PATCH',
            dataType: 'json',
            url: url,
            processData: false,
            contentType:  false,
            data: data,
            success: function (mydata) {
                $mydata = $(mydata);
                $('#section1' ).fadeOut().html($mydata).fadeIn();
            },
            failure: function (t) {
                console.log(t)
            }
        });
    })
</script>

我不知道如何将文件与其他数据一起发送到后端。我做了一些研究，试图通过添加表单数据解决问题，但它没有用。

Answer 1

应该可以像这样使用FormData：

var formData = new FormData();

formData.append('main_photo', mainPhoto, "name of the file");
formData.append('name', $("input[name=name]").val());
//...
$.ajax({
    //...
    data: formData,
    //...
});

Answer 2

您可以使用FormData

发送文件数据

<script>
    $('.submit').click( function (e) {
        e.preventDefault();
        var data = new FormData();
        var id= $(this).attr('id');
        var mainPhoto= ($('#main_photo').prop('file'));

        data.append('_token', "{{ csrf_token() }}");
        data.append('name', $("input[name=name]").val());
        data.append('company_size', $("input[name=company_size]").val());
        data.append('website', $("input[name=website]").val());
        data.append('slogan', $("input[name=slogan]").val());
        data.append('logo', $('input[name=logo]').val());
        data.append('message_title', $('input[name=message_title]').val());
        data.append('message_content', $('#message_content').val());
        data.append('main_photo', main_photo);
        data.append('about_us', $('#about_us').val());
        data.append('why_us', $('#why_us').val());
        data.append('recruiting_steps', $('#recruiting_steps').val());
        data.append('address', $('#address').val());
        data.append('email', $('#email').val());
        data.append('phone_number', $('#phone_number').val());
        data.append('location', $('#location').val());
        var url = '/companies/' + id ;
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            },
            type: 'PATCH',              
            url: url,
            processData: false,
            contentType:  false,
            data: data,
            success: function (mydata) {
                $mydata = $(mydata);
                $('#section1' ).fadeOut().html($mydata).fadeIn();
            },
            failure: function (t) {
                console.log(t)
            }
        });
    })
</script>

使用ajax与http请求一起发送文件

2 个答案: