Rails PaperClip 拖放多个文件

Question

我正在使用带有 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;
    }
});

这是基本的控制器部分： 定义创建 @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

我该怎么做？

谢谢

Answer 1

经过一番研究，我发现可以像这样轻松完成：

var dropArea = document.getElementById("droparea"),
    viewArea = document.getElementById("previewarea");

dropArea.addEventListener("drop", function(evt){
    evt.preventDefault();
    evt.stopPropagation();

    previewFiles(evt.dataTransfer.files);
    return false;
}, false);

function previewFiles(files){
    for (i=0; i < files.length; i++){
        if (typeof FileReader != "undefined"){
            var img = document.createElement("img");
            viewArea.appendChild(img);

            var reader = new FileReader();
            reader.onload = (function(theImg){
                return function(evt){
                    theImg.src = evt.target.result;
                }
            }(img));
            reader.readAsDataURL(files[i]);
        }
    }

    uploadFiles(files);
}

function uploadFiles(files){
    var fd = FormData();
    var position = 0;
    var max = files.length;
    if (typeof fd != "undefined"){
        function queue(){
            if (max >= 1 && position <= max - 1){
                fd.append("file", files[position]);
                upload();
            }
        }

        function upload(){
            $.ajax({
              url: '/boxes/hiThere',
              data: fd,
              processData: false,
              contentType: false,
              type: 'POST',
              success: function(data){
                position = position + 1;
                queue();
              }
            });
        }
        queue();
    }
}

dropArea.addEventListener("dragenter", function(evt){
    if (evt){
        this.className = "drag-enter";
    }
    endFn(evt);
}, false);

dropArea.addEventListener("dragleave", function(evt){
    this.className = "";
    endFn(evt);
}, false);

dropArea.addEventListener("dragover", function(evt){
    endFn(evt);
    evt.dataTransfer.dropEffect = 'move';

    return false;
}, false);

function endFn(evt){
    evt.preventDefault();
    evt.stopPropagation();
}

只需像这样在rails中添加正常保存：

def hiThere
  box = Box.new(params[:box])
  box.user_id = current_user.id
  box.file_path = params[:file]

  if box.save!
    set_flash "File saved sucessfully"
  else
    set_flash "Error, please try again"
  end

  respond_to do |format|
    format.js { redirect_to action: :index, :notice => "Done" }
  end
end