filepicker_使用Filepicker无痛处理文件上传

filepicker

Building a complete web form is some of the best practice for new web developers. You get a taste of a whole bunch of technologies when doing so. You have to use HTML in a more advanced way, you get to work with CSS for styling, you probably have to use JavaScript for client-side validation or AJAX type things, and, finally, you have to use some sort of server-side language like PHP to do something with the submitted form values. It also even introduces you to more advanced things like HTTP Request Methods - GET and POST.

对于新的Web开发人员而言，构建完整的Web表单是一些最佳实践。 这样做时，您会体会到一系列技术。 您必须以更高级的方式使用HTML ，必须使用CSS进行样式设计，您可能必须使用JavaScript进行客户端验证或AJAX类型的事情，最后，您必须使用某种服务器端像PHP这样的语言来处理提交的表单值。 甚至还向您介绍了更高级的内容，例如HTTP请求方法 -GET和POST。

Anyways, the point is working with forms can be quite the lift for some people. On top of this, the second you start introducing files, it only gets more complex. Doing things like styling elements, working on the front-end with real-time uploads, and storing the file securely on the server can be incredibly difficuly and/or time-consuming. This is where Filepicker for web developers will come in handy.

无论如何，对于某些人来说，使用表格很重要。 最重要的是， 第二秒钟您开始引入文件 ，但只会变得更加复杂。 诸如设置元素的样式，在前端上进行实时上载以及将文件安全地存储在服务器上之事情可能非常困难和/或耗时。 这是适用于Web开发人员的Filepicker派上用场的地方。

Filepicker is a web service for taking the headache out of file uploads. It allows you to easily allow your users to "pick" files on your website or app with ease. On top of this, it also allows you to easily tap into third-party APIs so users can even select files from cloud providers like Dropbox, Google Drive, or even Facebook.

Filepicker是一项Web服务，可减轻文件上传的麻烦 。 它使您可以轻松地让用户轻松地“拾取”网站或应用程序中的文件。 最重要的是，它还使您可以轻松利用第三方API，以便用户甚至可以从Dropbox ， Google Drive甚至Facebook等云提供商中选择文件。

This tutorial will get you started with integrating Filepicker onto your website or application. To demo this, we'll walk you through building an app where users can upload files, store them on the cloud, and see them appear in near real-time on the current page. Here's a picture of what we'll be building or click the demo link to check it out:

本教程将帮助您开始将Filepicker集成到您的网站或应用程序中。 为了演示这一点，我们将引导您构建一个应用程序，用户可以在其中上传文件 ， 将文件 存储在云中，并在当前页面上看到它们实时显示。 这是我们将要构建的图片，或单击演示链接进行查看：

为什么选择Filepicker？ (Why Filepicker?)

Filepicker is an easy to use cloud service for making file uploads easy. It's not just for doing uploads on the web though, they also provide libraries for tons of other technologies:

Filepicker是易于使用的云服务，可轻松上传文件。 尽管这不仅用于在网络上上传，它们还提供了许多其他技术的库：

• iOS
  的iOS
• Android
  安卓系统
• Python
  Python
• Ruby on Rails
  Ruby on Rails
• django
  詹戈
• CakePHP
  CakePHP
• Meteor
  流星
• PhoneGap
  电话间隙
• Node.js
  Node.js
• WordPress
  WordPress的

Basically anyone can tap-into their API and use them for "picking files" regardless of the language or platform you're using. Here's what it looks like on the web:

基本上，任何人都可以接入他们的API并将其用于“挑选文件”，而与您使用的语言或平台无关。 这是网络上的样子：

By taking over the file upload process of your site or application, they can also middle-man some extra cool things. They make it very easy to optionally do things like hosting, cropping the photo, pulling from third-parties like Facecbook or cloud storage, facial recognition, cross-browser and responsive, and much more.

通过接管您网站或应用程序的文件上传过程，他们还可以中间商一些额外的好东西 。 它们使选择托管，裁剪照片，从第三方（例如Facecbook或云存储）中提取，面部识别，跨浏览器和响应式等操作变得非常容易。

入门 (Getting Started)

注册 (Signup)

Filepicker is a cloud-service. So the first step to get started is to create an account with them. Don't worry though, they provide a free service with plenty of room until the first paid tier. With this, you get:

Filepicker是一项云服务。 因此，开始的第一步是使用他们创建一个帐户。 不过请放心 ，他们会为您提供免费的服务，并提供充足的空间，直到您支付第一笔费用。 这样，您将获得：

• 3 GB of Bandwidth
  3 GB带宽
• 20MB maximum file size
  档案大小上限为20MB
• 500 files per month
  每月500个文件

You can signup on their registration page.

您可以在他们的注册页面上注册 。

创建一个新的应用程序 (Create a new app)

Just like when creating a Facebook or Twitter app, you need to first create an application to get a unique App ID.

就像创建Facebook或Twitter应用程序一样，您需要首先创建一个应用程序以获得唯一的应用程序ID。

After this, we're all set to begin coding.

之后，我们都准备开始编码。

设置页面 (Setting Up Your Page)

We're building a simple single page demo with Filepicker that let's anyone upload a photo to a wall of photos. The first thing we need to do is setup our basic HTML. Here's what I'll be using to start as a super basic layout:

我们正在使用Filepicker构建一个简单的单页演示，任何人都可以将照片上传到照片墙。 我们需要做的第一件事是设置我们的基本HTML。 这是我将要开始使用的最基本的布局：

Note: This application only uses HTML, CSS, and jQuery. style.css will be used for custom styles and power.js for JS scripts.

注意：此应用程序仅使用HTML，CSS和jQuery。 style.css将用于自定义样式， power.js用于JS脚本。

整合filepicker.js (Integrating filepicker.js)

There are two methods you can use for integrating with filepicker.js with your website. One method is a pure JavaScript approach (we'll be doing that one) while the other method is to use their ultra simple widget.

您可以使用两种方法与网站上的filepicker.js集成。 一种方法是纯JavaScript方法（我们将这样做），而另一种方法是使用其超简单的小部件。

JavaScript方法 (JavaScript Method)

The first thing you need to do is embed filepicker.js on your website. Simply add a reference to the filepicker.js file like so to our existing code base where the scripts are:

您需要做的第一件事是在您的网站上嵌入filepicker.js。 只需添加对filepicker.js文件的引用，就像对现有脚本的脚本库一样：

Now that we added filepicker.js to our markup, it introduces a new global JavaScript object: filepicker.

现在我们将filepicker.js添加到了标记中，它引入了一个新的全局JavaScript对象： filepicker 。

We can take a quick peek with this in power.js by doing:

通过执行以下操作，我们可以在power.js快速power.js ：

console.log(filepicker)

This doens't do or show much, but it's a start. We need to start doing stuff with it now. The first step is to set an API key.

这没有做或显示太多，但这只是一个开始。 我们现在需要开始做一些事情。 第一步是设置API密钥。

You can do this with one line:

您可以使用一行来完成此操作：

filepicker.setKey("A1jBeZwwiQvqb7X20ka21z");

After the API key is set, we can now start using the filepicker object with events such as a click.

设置API密钥后，我们现在可以开始将filepicker对象用于诸如单击之类的事件。

Here's an example with jQuery that limits uploads to images:

这是jQuery的示例，用于限制上传到图片：

// On "click" event with jQuery
$('#big-freaking-button').click(function() {

    // Settings
    filepicker.pick({
        mimetype: 'image/*', /* Images only */
        maxSize: 1024 * 1024 * 5, /* 5mb */
        imageMax: [1500, 1500], /* 1500x1500px */
        cropRatio: 1/1, /* Perfect squares */
        services: ['*'] /* All available third-parties */
    }, function(blob){
        // Returned Stuff
        var filename = blob.filename;
        var url = blob.url;
        var id = blob.id;
        var isWriteable = blob.isWriteable;
        var mimetype = blob.mimetype;
        var size = blob.size;

        console.log(blob)
    });

});

You can do a bunch of cool things with this. You can limit to specific image types, adjust quality, specify which third-party integrations you want to use, if you want it to popup in a new window or appear in a specific container, and more.

您可以以此做很多很酷的事情。 您可以限制特定的图像类型 ， 调整质量 ，指定要使用的第三方集成 ，要在新窗口中弹出还是要在特定容器中显示 ，等等。

It's all just a bunch of config options. You can read a full list of things to do here.

全部都是一堆配置选项。 您可以在此处阅读完整的事情清单。

小部件方法 (Widget method)

If you're still working on your JS skills, you can use an out-of-the-box solution with a widget that they provide. This is super easy to use. All you need to do is visit their Quick Start page to be walked through the process of generating your widget.

如果您仍在学习JS技能，则可以使用现成的解决方案及其提供的小部件。 这是超级容易使用。 您所需要做的就是访问其“ 快速入门”页面，以逐步完成生成小部件的过程。

Here's what it will roughly look like for you to copy and paste into your form:

复制并粘贴到表单中的大致外观如下：

If you use the pure JavaScript method you can essentially trigger Filepicker whenever you want. On a click, on hover, after a signup, etc. With the Widget, you have to treat it like a replacement for the upload form input.

如果您使用纯JavaScript方法，则基本上可以随时随地触发Filepicker。 单击，悬停，注册后等。使用Widget，您必须将其视为上载表单输入的替代品。

处理上传 (Handling Uploads)

After a user uploads a file to filepicker, we have to decide what to do with it. Filepicker will return the URL of the uploaded file to you, it's up to you what to do with it.

用户将文件上传到filepicker之后，我们必须决定如何处理它。 Filepicker将向您返回上传文件的URL，这取决于您如何处理。

For this example, we're just going to dump the URL and store it in a Mongoose database with node. This article won't cover how we set the node part up, but you can look through our node articles if you'd like to learn more. All we did was create an endpoint to save and retrieve uploads:

对于此示例，我们将转储URL并将其存储在带有node的Mongoose数据库中。 本文不会介绍如何设置节点部分，但是如果您想了解更多信息，可以阅读我们的节点文章 。 我们所做的就是创建一个端点来保存和检索上传：

GET /api/links /* Retrieves all images */
POST /api/links /* Saves a URL */

Now, here's our updated code for uploading the picked image:

现在，这是我们更新的代码，用于上传选择的图像：

$('#big-freaking-button').click(function() {

    // Settings
    filepicker.pick({
        mimetype: 'image/*', /* Images only */
        maxSize: 1024 * 1024 * 5, /* 5mb */
        imageMax: [1500, 1500], /* 1500x1500px */
        cropRatio: 1/1, /* Perfect squares */
        services: ['*'] /* From anywhere */
    }, function(blob) {

        // Returned stuff for example
        var filename = blob.filename;
        var url = blob.url;
        var id = blob.id;
        var isWriteable = blob.isWriteable;
        var mimetype = blob.mimetype;
        var size = blob.size;

        // Save to a database somewhere
        // Alternatively you can have filepicker do it for you: https://www.filepicker.com/documentation/storage/
        $.ajax({
            url: '/api/links',
            type: 'POST',
            data: {
                url: blob.url
            },
            success: function(data) {

                // Response from storing the URL successfully
                console.log(data);

            }
        });

    });

});

文件选择器存储 (Filepicker Storage)

Here's the thing though, Filepicker can actually manage your uploads for you with multiple third-party providers so you don't have to even worry about it. This is great because it eliminates another third-party API to maintain.

事情就是这样，Filepicker 实际上可以与多个第三方提供商一起为您管理上载，因此您甚至不必担心。 这很棒，因为它消除了要维护的另一个第三方API。

They support the following providers:

他们支持以下提供程序：

• S3
  S3
• Rackspace
  机架空间
• Azure
  蔚蓝
• Dropbox
  投寄箱
• Google Cloud
  谷歌云

You can read about Filepicker storage in their docs here.

您可以在其文档中阅读有关Filepicker存储的信息 。

填充墙 (Populating the Wall)

Now that we have Filepicker setup, it's time to build our wall of images. We'll need to do two things:

现在我们有了Filepicker设置，是时候构建图像墙了。 我们需要做两件事：

• Real-time update the wall with the users current image
  使用用户当前图像实时更新墙
• Populate the wall with all uploaded photos on page load
  页面加载中所有上传的照片填充墙

对于当前上传 (For the current upload)

At this point, we're able to successfully select an image with filepicker, get a URL from it, and then store that URL in a database somewhere. It's now time to take that URL and update our page.

至此，我们已经能够成功地使用文件选择器选择一个图像，从中获取URL，然后将该URL存储在某个地方的数据库中。 现在是时候获取该URL并更新我们的页面了。

In order to do this, I use a quick and dirty jQuery templating system I made. We'll cover this in the tutorial, but you can technically do this however you'd like. Our purpose is just getting this working as a proof of concept for the tutorial.

为了做到这一点，我使用了一个快速而肮脏的jQuery模板系统。 我们将在本教程中介绍这一点，但是您可以根据需要在技术上做到这一点。 我们的目的只是使此工作作为本教程的概念证明。

First thing we're going to do is create our HTML5 template for images. Here's what that looks like:

我们要做的第一件事是为图像创建HTML5模板。 看起来像这样：

With jQuery, we're going to grab the entire template element (including its children), turn it into a string, replace {src} with the uploaded image, then add it into the DOM / our website. This might sound crazy, but it is really easy with jQuery:

使用jQuery，我们将获取整个template元素（包括其子元素），将其转换为字符串，将{src}替换为上传的图像，然后将其添加到DOM /我们的网站中。 这听起来很疯狂，但是使用jQuery确实很容易：

var template = $('template').html();
    var imageBlock = template.replace(/{src}/g, blob.url);
    $('.wall').prepend(imageBlock);

And now here it is all together:

现在这一切都在一起：

$('#big-freaking-button').click(function() {

        // Settings
        filepicker.pick({
        mimetype: 'image/*', /* Images only */
        maxSize: 1024 * 1024 * 5, /* 5mb */
        imageMax: [1500, 1500], /* 1500x1500px */
        cropRatio: 1/1, /* Perfect squares */
        services: ['*'] /* From anywhere */

    }, function(blob) {

        // Returned stuff for example
        var filename = blob.filename;
        var url = blob.url;
        var id = blob.id;
        var isWriteable = blob.isWriteable;
        var mimetype = blob.mimetype;
        var size = blob.size;

        // Save to a database somewhere
        // Alternatively you can have filepicker do it for you: https://www.filepicker.com/documentation/storage/
        $.ajax({
            url: '/api/links',
            type: 'POST',
            data: {
                url: blob.url
            },
            success: function(data) {

                // Add it to the wall!

                // Quick and dirty template system
                var template = $('template').html();
                var imageBlock = template.replace(/{src}/g, blob.url);
                $('.wall').prepend(imageBlock);

            }
        });

    });

});

在页面加载中填充墙 (Populating the Wall on Page Load)

Now that we can populate the wall of images on upload in near real-time, we'll now populate the wall with all previous images. From the database of our uploaded URLs that we created, we'll now fetch those.

现在我们可以近实时地填充上载的图像墙，现在我们将所有以前的图像填充到墙中。 现在，从创建的上载URL的数据库中获取这些URL。

$(function() {
    // Populate the wall!
    $.ajax({
        url: '/api/links',
        type: 'GET',
        success: function(data) {

            // Quick and dirty custom jQuery templating
            var template = $('template').html();

            // Loop through all URLs and add to wall
            $.each(data, function(index, value) {
                var imageBlock = template.replace(/{src}/g, value.url);
                $('.wall').prepend(imageBlock);
            });

        }
    });
});

That's it! Now we have are fully working application with Filepicker!

而已！ 现在，我们已经可以使用Filepicker来运行完全正常的应用程序了！

其他例子 (Additional Examples)

If you need a more stripped-down example to get you started, you can checkout these examples provided by Filepicker on JSFiddle:

如果您需要一个更简化的示例来开始使用，可以在JSFiddle上检出Filepicker提供的这些示例：

• Basic pick
  基本选择
• Crop Facebook Image
  裁剪Facebook图像
• Multiple images from social servivces
  来自社会服务的多个图像
• Crop image with 4/3 Ration
  以4/3比例裁剪图像
• Client side compression and resize to width 600
  客户端压缩并调整为宽度600
• Pick multiple web images
  选择多个网络图像

结论 (Conclusion)

Filepicker is an awesome tool for taking the pain out of file uploads. In this simple tutorial we were able to build a quick application to let users upload images from tons of third-party sources, be completely responsive, and display the result in the browser in near real-time.

Filepicker是一个很棒的工具，可以减轻文件上传的麻烦。 在这个简单的教程中，我们能够构建一个快速的应用程序，以使用户可以从大量第三方来源上传图像，完全响应并在浏览器中实时显示结果。

We'll also be releasing a Filepicker Angular Directive and tutorial soon. Keep checking the blog for when we release that.

我们还将很快发布Filepicker Angular指令和教程。 继续检查博客，了解我们何时发布。

Finally, here are some helpful links to wrap-up:

最后，这是一些有用的总结链接：

• Filepicker
  文件选取器
• Filepicker Official Docs
  Filepicker官方文件
• Filepicker Register
  文件选择器寄存器

翻译自: https://scotch.io/tutorials/handling-file-uploads-painlessly-with-filepicker

filepicker