使用可排序的 jQuery UI 对上传图像进行排序并保存到数据库

Question

<input type="file" name="uploadPhotos[]" class="upload" multiple accept='image/*' />
<div class="previewBlock" id="sortable"></div>

我用js构建预览上传图片

function handleFileSelect(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                $('.previewBlock').append(
                    $('<div/>').append(
                        $('<div/>').append(
                            $('<img/>').attr({
                                name: theFile.name,
                                src: e.target.result,
                                title: escape(theFile.name)
                            }).append(escape(theFile.name))
                        )
                    )
                );
            };
        })(f);
        reader.readAsDataURL(f);
    }
}
$('.upload').change(handleFileSelect);

我使用 $_FILES 并通过默认排序将图像保存到数据库。 jQuery UI 排序后，如何将重新排序的数组与上传图像一起发送到 PHP？

$("#sortable").sortable({
        start: function(event, ui) { },
        change: function(event, ui) { },
        update: function(event, ui) {
            //
        }
$('#sortable').disableSelection();

Answer 1

您可以通过 AJAX 请求处理此问题。

update: function(event, ui) {

    var images = "array of ids or something"

    $.ajax({
        url: '/path/to/php/file',
        type: 'POST',
        data: images,
        success: function( response ) {
            console.log( response );
        }
    });

}

在 PHP 方面，您只需要一些东西来处理请求并返回响应。