[JavaScript]Wysyłanie formularza ze zdjęciem bez przeładowania strony Opcje

[trifek]

Witajcie,

Mam małe problemy z JS. Mam taki kod:

[HTML] pobierz, plaintext 
 
    <div class="container">
        <div class="row sortableImages">
            <div class="col-sm-2 imgUp imagesViewBox">
                <form action="server.php" method="post" id="form1">
                    <div class="imagePreview"></div>
                    <label class="btn btn-primary">
                        Upload 1
                        <input type="file" accept="image/jpeg" class="uploadFile img" value=""
                               style="width: 0px;height: 0px;overflow: hidden;" name="file1" id="file1"><i
                            class="fa fa-times del" data-id="delete-1"></i>
                    </label>
                </form>
            </div>
            <div class="col-sm-2 imgUp imagesViewBox">
                <form action="server.php" method="post" id="form2">
                    <div class="imagePreview"></div>
                    <label class="btn btn-primary">
                        Upload 2
                        <input type="file" accept="image/jpeg" class="uploadFile img" value=""
                               style="width: 0px;height: 0px;overflow: hidden;" name="file2" id="file2"><i
                            class="fa fa-times del" data-id="delete-2"></i>
                    </label>
                </form>
            </div>
            <div class="col-sm-2 imgUp imagesViewBox">
                <form action="server.php" method="post" id="form3">
                    <div class="imagePreview"></div>
                    <label class="btn btn-primary">
                        Upload 3
                        <input type="file" accept="image/jpeg" class="uploadFile img" value=""
                               style="width: 0px;height: 0px;overflow: hidden;" name="file2" id="file3"><i
                            class="fa fa-times del" data-id="delete-3"></i>
                    </label>
                </form>
            </div>
            <div class="col-sm-2 imgUp imagesViewBox">
                <form action="server.php" method="post" id="form4">
                    <div class="imagePreview"></div>
                    <label class="btn btn-primary">
                        Upload 4
                        <input type="file" accept="image/jpeg" class="uploadFile img" value=""
                               style="width: 0px;height: 0px;overflow: hidden;" name="file2" id="file4"><i
                            class="fa fa-times del" data-id="delete-4"></i>
                    </label>
                </form>
            </div>
        </div>
    </div>
 
 
    </body>
    </html>
    <script>
        $(document).on("click", "i.del", function () {
            alert('delete file id =' + $(this).data("id"));
            $.ajax({
                url: 'deleteFile.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                type: 'post',
                success: function (data) {
                    alert(data);
                }
            });
        });
        $(function () {
            $(document).on("change", ".uploadFile", function () {
                var uploadFile = $(this);
                var files = !!this.files ? this.files : [];
                if (!files.length || !window.FileReader) return;
 
                if (/^image/.test(files[0].type)) { // only jpg file
                    var reader = new FileReader();
                    reader.readAsDataURL(files[0]);
 
                    reader.onloadend = function () {
                        //alert(uploadFile.closest(".upimage").find('.imagePreview').length);
                        uploadFile.closest(".imgUp").find('.imagePreview').css("background-image", "url(" + this.result + ")");
                        //alert('send form');
 
                        var file_data = $('#file1').prop('files')[0];
                        var form_data = new FormData();
                        form_data.append('file', file_data);
                        $.ajax({
                            url: 'upload.php',
                            dataType: 'text',
                            cache: false,
                            contentType: false,
                            processData: true,
                            data: form_data,
                            type: 'post',
                            success: function (data) {
                                alert(data);
                            }
                        });
                    }
                }
            });
 
 
            $(".sortableImages").sortable({
                items: '.imagesViewBox',
                cursor: 'move',
                opacity: 0.5,
                containment: '.sortableImages',
                distance: 20,
                tolerance: 'pointer',
                update: function (event, ui) {
                    $(".sortableImages .imagesViewBox").each(function (index) {
                        index = index + 1;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                            },
                            url: 'savePosition.php&id=1111111&index=' + index + '&file=' + $(this).text(),
                            dataType: 'text',
                            type: 'post',
                            cache: false,
                            data: $(this).serialize(),
                            success: function (data, textStatus, jQxhr) {
                            },
                            error: function (jqXhr, textStatus, errorThrown) {
                                alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                            }
                        });
                    });
                }
            });
 
        });
    </script>
    <style>
        .imagePreview {
            width: 100%;
            height: 180px;
            background-position: center center;
            background: url(http://cliquecities.com/assets/no-image-e3699ae23f866f6cbdf8ba2443ee5c4e.jpg);
            background-color: #fff;
            background-size: cover;
            background-repeat: no-repeat;
            display: inline-block;
            box-shadow: 0px -3px 6px 2px rgba(0, 0, 0, 0.2);
        }
 
        .btn-primary {
            display: block;
            border-radius: 0px;
            box-shadow: 0px 4px 6px 2px rgba(0, 0, 0, 0.2);
            margin-top: -5px;
        }
 
        .del {
            position: absolute;
            top: 0px;
            right: 15px;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
        }
 
    </style>
[HTML] pobierz, plaintext 

Podgląd: http://serwer1356363.home.pl/pub/kolor1.html




Po dodaniu zdjęcia w formularzu chciałbym go wysłać w "tle" bez przeładowania strony. W jaki sposób można to zrobić?
Wyskakuje mi błąd: TypeError: Can only call FormData.append on instances of FormData

Bardzo proszę o pomoc

Ten post edytował trifek 29.10.2019, 15:56:52

[rad11]

Spróbuj ustawić processData na false