如何使用fineuploader答案

【问题标题】：How to use fineuploader如何使用fineuploader
【发布时间】：2014-01-16 09:18:51
【问题描述】：

我希望将 fineuploader 集成到我的 JQuery Mobile 应用程序中。作为起点，我尝试使用on fineuploader.com 提供的默认模板来熟悉自己。

我从github.下载了最新的fineuploader 我通过猜测给出了 .js 文件的来源，因为我找不到明确的文档说明要引用哪些文件才能使用 Fineuploader jquery 插件。

默认模板不起作用，我相信我没有引用适当的文件？有人可以告诉我我做错了什么吗？

下面是我使用的默认模板from fineuploader.com。

<!DOCTYPE html>

<html>
  <head>

      <link href="fine-uploader-master/client/fineuploader.css" rel="stylesheet"/>

  </head>
  <body>

    <!-- The element where Fine Uploader will exist. -->
    <div id="fine-uploader">
    </div>

    <!-- jQuery version 1.10.x (if you are using the jQuery plugin -->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

    <!-- Fine Uploader-jQuery -->
    <script src="fine-uploader-master/client/js/jquery-plugin.js" type="text/javascript"></script>
    <script src="fine-uploader-master/client/js/uploader.js" type="text/javascript"></script>
    <script>
    // Wait until the DOM is 'ready'
    $(document).ready(function () {
        $("#fine-uploader").fineUploader({
            debug: true,
            request: {
                endpoint: '/uploads'
            },
            deleteFile: {
                enabled: true,
                endpoint: '/uploads'
            },
            retry: {
               enableAuto: true
            }
        });
    });
    </script>

    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                  <div class="qq-progress-bar-container-selector">
                      <div class="qq-progress-bar-selector qq-progress-bar"></div>
                  </div>
                  <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                  <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                  <span class="qq-upload-file-selector qq-upload-file"></span>
                  <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                  <span class="qq-upload-size-selector qq-upload-size"></span>
                  <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                  <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                  <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                  <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>

  </body>
</html>

【问题讨论】：

您不应引用单个源文件。相反，构建您自己的副本。请参阅"build your own" section in the documentation。

标签： jquery jquery-mobile file-upload fine-uploader image-upload

【解决方案1】：

我同意 Ray 的上述评论，即您不应引用单个文件。

您可以购买许可证并下载他们的打包版本.. http://fineuploader.com/purchase_form.html

或者，这里是我用来从 Windows 系统上的 git 存储库构建 FineUploader 的命令。这是对您在上面 Ray 提供的“构建您自己的”链接中找到的内容的更详细说明。我相信这将从存储库中提取最新代码，如果您想要旧版本，则必须对 git clone 调用进行一些调查，因为我不太熟悉它。

安装nodejs：http://nodejs.org/download/
安装 git：http://git-scm.com/download/win（确保在安装过程中选择“从命令提示符运行 Git”，以便将其添加到环境路径中。
打开 NodeJs 命令提示符
全局安装 Grunt-cli (-g)：
- npm install –g grunt-cli
使用 Git 将最新的源代码拉入目录
- CD 到您希望将存储库拉入的源目录（例如cd c:\source）
- 运行git clone git://github.com/Widen/fine-uploader
- 这将创建一个“fine-uploader”目录，其中包含最新的源文件
CD 进入精品上传目录
~~运行以下命令来安装所需的软件包（将它们复制到批处理文件中以使其更容易...）。注意：随着未来项目的发展，可能需要其他包。~~运行以下命令安装所需的包。
- npm install
运行grunt package 构建打包好的js和css文件。

最后一个命令将必要的文件组合在一起并将它们放入“_dist”目录中。 “_dist”目录包含每个程序风格（all、jquery、s3 等）的文件夹和 zip 文件。更详细的包（即 jquery vs core）将是更大的文件，所以只使用你需要的。

【讨论】：

不需要所有这些单独的 npm install 调用。只需在与 package.json 相同的目录中运行 npm install 即可。
@RayNicholus 谢谢！我认为有一种方法可以做到这一点，但还没有足够地解决 nodeJs 问题。答案已更新。
天哪，这是最糟糕的答案......这么多废话和不需要的东西。为什么要使用 GRUNT 只是因为您正在使用它？也许我只与 GULP 合作？还是不想要 GRUNT？还是节点？嗯？
@vsync 那么就很简单了。购买打包版本的许可证并下载...