1

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

对于像我这样技术不好的开发人员来说，插件的描述不是很详细。但我终于让它工作了（经常开始在 Stackoverflow 上写我的问题让我明白我的代码有什么问题）

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

4

1 回答 1

3

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

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

返回 Blobstore URL 的 GAE URL。

我们需要返回我们之前在表单中指定的 URL（当使用 an<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 上传后调用的帖子：

    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]));

获取更新的图像。

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

于 2013-07-16T01:45:25.410 回答