3

RailsでPaperClipを使用してファイルをアップロードしていますが、正常に動作しますが、複数のファイルをアップロードできるドラッグアンドドロップファイルアップロードを実装したいと考えています。また、各ファイルは特定のサイズを超えてはなりません。

編集:

これが私がこれまでに持っているものです。JavaScript部分を作成しました。ただし、コントローラー部分の作成方法がわかりません

var $dropArea = $(".drop-area");

$dropArea.bind({
    dragover: function () {
        $(this).addClass('hover');
        return false;
    },
    dragend: function () {
        $(this).removeClass('hover');
        return false;
    },
    drop: function (e) {
        e = e || window.event;
        e.preventDefault();

        e = e.originalEvent || e;

        var files = (e.files || e.dataTransfer.files);

        var $img = $('<img src="" class="uploadPic" title="" alt="" />');
        for (var i = 0; i < files.length; i++) {
            (function (i) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var newImg = $img.clone().attr({
                        src: event.target.result,
                        title: (files[i].name),
                        alt: (files[i].name)
                    });

                    $("body").append(newImg);
                };
                reader.readAsDataURL(files[i]);

                var xhr = new XMLHttpRequest();

                var fd = new FormData();

                fd.append(files[i].name, files[i]);

                xhr.open("POST", 'url', true);
                xhr.send(fd);
            })(i);
        }

        return false;
    }
});

そして、これは基本的なコントローラー部分です: def create @image = Image.new(params[:image])

    if @image.save
        respond_to do |format|
            format.html { redirect_to action: 'index', :notice => 'Image saved'}
            format.js   { redirect_to action: 'index', :notice => 'Image saved'}
            format.xml  { redirect_to action: 'index', :notice => 'Image saved'}
        end
    else
        flash[:notice] = "Error, Please try again"
        redirect_to action: 'new'
    end
end

これどうやってするの?

ありがとう

4

1 に答える 1