jquery - 使用 JQuery GAE Dropload 时出现问题 - 通过拖放上传 Blobstore

Question

我想在我的网页上实现拖放文件以将文件上传到 Google Blobstore。关于该主题的资源很少。实现这一目标的最简单方法之一似乎是使用 Jude Osborn jquery.gaedropload

对于像我这样技术较差的开发者来说，插件的描述不是很详细。但我终于让它工作了(因为经常在 Stackoverflow 上写我的问题让我明白我的代码出了什么问题)

我会回答我自己的问题，希望这也能帮助其他人。

Answer 1

也许这对于经验丰富的开发人员来说是显而易见的，但我花了几个小时(不计算天数)。在开始使用 jquery.gaedropload 之前，我从具有经典 HTML 表单的工作页面开始将图像上传到 Blobstore。

• 需要使用 jQuery 2.x(使用 jQuery 1.x 插件会失败并出现一些错误)。也许这很正常，因为插件使用 HTML5 new FormData()
• generate_url:文档说:

A GAE URL that returns a blobstore URL.

我们需要返回之前在表单中指定的 URL(当使用 <input type="file" name="uploadedFile" /> 上传文件时)。在 JSP 文件中我们使用:<form action="<%= blobstoreService.createUploadUrl("/uploadimage") %>"

因此我们需要编写的 get 函数是这样的:

public void doGet( HttpServletRequest request, HttpServletResponse response )   throws ServletException, IOException {
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
    response.setContentType("text/html");
    response.setCharacterEncoding( "UTF-8" );
    PrintWriter out = response.getWriter();
    out.println(blobstoreService.createUploadUrl("/uploadimage")); 
}

• 我们无法再指定输入的名称(在使用之前: name="uploadedFile" )。现在名称将被插件设置为 file0 。因此我们需要修改Blobstore上传后调用的post:

  BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
  Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(request);
  List<BlobKey> blobKeys = blobs.get("file0"); //Before was: uploadedFile
  

• 当发布表单上传图片时，我们需要额外的参数(以识别上传的图片)。在它们采用以下形式之前:

  <input type="hidden" name="setName" value="${ setName }">
  <input type="hidden" name="imageId" value="3">
  

现在我们需要在调用extraFormData插件时指定它们:

    $('#image3').gaeDropload( {
        extraFormData: { setName: "${ setName }", imageId: 4 },
        dragover: function() { //Show we can drop here
            $('#image3').css('background', 'red');
        },
        dragleave: function() { //Show we cannot drop anymore
            $('#image3').css('background', '');
        },
        afterDrop: function() { //Show we cannot drop anymore
            $('#image3').css('background', '');
        }
    }); //gaeDropload

还可以添加拖放功能以向用户显示可以放置的位置。

image3 只是图像周围的 div:

    <div class="span1 thumbnail" id="image3" ><img src="<%=set.getImageUrl(3)%>" alt=""></div>

最后一点是上传后刷新图片。我们需要另一个 get 来返回新的图像 URL。调用插件时我们添加:

        dropSuccess: function() { //Async call to get the new uploaded image
            $.ajax({
                url: '/blobimage?setName=${ setName }&buttonId=4',
                async: true,  //useless to specify, this is default
                success: function(data) {
                    $('#image3 > img').attr('src', data); //get img inside div
                }
            });

并且 get 将调用

ImagesService imagesService = ImagesServiceFactory.getImagesService();
imagesService.getServingUrl(ServingUrlOptions.Builder.withBlobKey(images[index]));

获取更新后的图像。

在我了解它是多么容易使用之后，这是一个很棒的插件。