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方面，您只需要处理请求并返回响应。

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

1 个答案: