3

嗨，我喜欢jQuery-File-Upload 插件的外观，但是从好位中删除绒毛代码是多么困难，这太疯狂了。它似乎打算强迫我的喉咙工作。

简单地说，当它不是我的代码的一部分时它可以工作，但是当我在它自身之外实现它时它会中断

例如：

  • index.html 示例是带有外部 url 引用的 RIDDLED，我不想/不能在我的实际代码中使用。当我把它剪下来并试图将它倾斜时，它会破裂并且有太多的东西要倒出来。
  • 对于一个知道自己想要什么的实际开发人员来说，文档开始的过程太“深入”了——没有“简单”的示例，有基于假设您的上下文的“假设”示例。
  • 有人可以用我自己的 index.php 帮助我，它告诉我如何以尽可能简单和轻松的方式定位我放置的实际 php 文件，发送哪些参数（对于任何后续的数据库更新我可能会做）在设置中指定上传目录的位置，隐藏了如何做任何“正常”的事情。第一原则总是最好的，但它们不存在。
  • 简单地说：我想用来自 jQuery-File-Upload 的漂亮 gui 版本替换普通的“file_upload”htmlform 场景，但它太难了一半！

真正的代码在哪里！

在我接受演讲之前，这是在大约 9 个月内第三次或第四次尝试实现这一点，每次安装大约 4 小时后我就停止了。每次我都退缩并选择不那么漂亮但我可以适当控制的东西。

        <!-- Force latest IE rendering engine or ChromeFrame if installed -->
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->

        <!-- Generic page styles -->
        <link rel="stylesheet" href="../common/jQuery-File-Upload_8.7.1/css/style.css">
        <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
        <link rel="stylesheet" href="../common/jQuery-File-Upload_8.7.1/css/jquery.fileupload-ui.css">

        <div class="container">

            <!-- The file upload form used as target for the file upload widget -->
            <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">

                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                <div class="row fileupload-buttonbar">
                    <div class="span7">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-success fileinput-button">
                            <i class="icon-plus icon-white"></i>
                            <span>Add files...</span>
                            <input type="file" name="files[]" multiple>
                        </span>
                        <button type="submit" class="btn btn-primary start">
                            <i class="icon-upload icon-white"></i>
                            <span>Start upload</span>
                        </button>
                        <button type="reset" class="btn btn-warning cancel">
                            <i class="icon-ban-circle icon-white"></i>
                            <span>Cancel upload</span>
                        </button>
                        <button type="button" class="btn btn-danger delete">
                            <i class="icon-trash icon-white"></i>
                            <span>Delete</span>
                        </button>
                        <input type="checkbox" class="toggle">
                        <!-- The loading indicator is shown during file processing -->
                        <span class="fileupload-loading"></span>
                    </div>
                    <!-- The global progress information -->
                    <div class="span5 fileupload-progress fade">
                        <!-- The global progress bar -->
                        <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                            <div class="bar" style="width:0%;"></div>
                        </div>
                        <!-- The extended global progress information -->
                        <div class="progress-extended">&nbsp;</div>
                    </div>
                </div>
                <!-- The table listing the files available for upload/download -->
                <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
            </form>
            <br>            
        </div>
        <!-- The blueimp Gallery widget -->
        <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹&lt;/a>
            <a class="next">›&lt;/a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
        <!-- The template to display files available for upload -->
        <script id="template-upload" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-upload fade">
                <td>
                    <span class="preview"></span>
                </td>
                <td>
                    <p class="name">{%=file.name%}</p>
                    {% if (file.error) { %}
                        <div><span class="label label-important">Error</span> {%=file.error%}</div>
                    {% } %}
                </td>
                <td>
                    <p class="size">{%=o.formatFileSize(file.size)%}</p>
                    {% if (!o.files.error) { %}
                        <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
                    {% } %}
                </td>
                <td>
                    {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                        <button class="btn btn-primary start">
                            <i class="icon-upload icon-white"></i>
                            <span>Start</span>
                        </button>
                    {% } %}
                    {% if (!i) { %}
                        <button class="btn btn-warning cancel">
                            <i class="icon-ban-circle icon-white"></i>
                            <span>Cancel</span>
                        </button>
                    {% } %}
                </td>
            </tr>
        {% } %}
        </script>
        <!-- The template to display files available for download -->
        <script id="template-download" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
            <tr class="template-download fade">
                <td>
                    <span class="preview">
                        {% if (file.thumbnailUrl) { %}
                            <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                        {% } %}
                    </span>
                </td>
                <td>
                    <p class="name">
                        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                    </p>
                    {% if (file.error) { %}
                        <div><span class="label label-important">Error</span> {%=file.error%}</div>
                    {% } %}
                </td>
                <td>
                    <span class="size">{%=o.formatFileSize(file.size)%}</span>
                </td>
                <td>
                    <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                        <i class="icon-trash icon-white"></i>
                        <span>Delete</span>
                    </button>
                    <input type="checkbox" name="delete" value="1" class="toggle">
                </td>
            </tr>
        {% } %}
        </script>

        <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.iframe-transport.js"></script>
        <!-- The basic File Upload plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.ui.widget.js"></script>
        <!-- The basic File Upload plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload.js"></script>
        <!-- The File Upload processing plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-process.js"></script>
        <!-- The File Upload image preview & resize plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-image.js"></script>
        <!-- The File Upload audio preview plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-audio.js"></script>
        <!-- The File Upload video preview plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-video.js"></script>
        <!-- The File Upload validation plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-validate.js"></script>
        <!-- The File Upload user interface plugin -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-ui.js"></script>
        <!-- The main application script -->
        <script src="../common/jQuery-File-Upload_8.7.1/js/main.js"></script>
        <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
        <!--[if (gte IE 8)&(lt IE 10)]>
        <script src="../common/jQuery-File-Upload_8.7.1/js/cors/jquery.xdr-transport.js"></script>
        <![endif]-->
4

1 回答 1

1

所以我已经用这个拔了一个多星期的头发，我感觉到你的痛苦。不过，我设法让一些工作正常进行，并且我正计划在某个地方写一篇适当的分步文章/博客文章，因为我很难找到很多有用的信息。

我如何最终正确地实现这一点，是通过实现基本插件，并手动构建用户界面的其余部分。我的要求是多文件上传，每次上传都有额外的表单字段。

使用基本插件时，请务必节省时间并获取他们在 UI 版本中使用的模板引擎（您提到的外部 URL 引用之一），因为拥有一个您想要为每个插件加载的模板确实很有帮助上传。

您需要的 JS 文件如下：

  • jquery.ui.widget.js
  • jquery.iframe-transport.js
  • jquery.fileupload.js
  • tmpl.min.js（如果您打算使用模板引擎）

这是我用于文件上传的html：

<div class="row-fluid">
    <input type="file" name="files[]" id="fileupload" multiple="multiple" data-url="uploader.php"/>
</div>

<!-- the file uploads will be shown here -->
<div id="uploads" class="row-fluid"></div>

<!-- template for each file being uploaded -->
<script type="text/x-tmpl" id="upload-template">
    <div class="span4" style="padding: 10px;">
        <div class="preview"></div>

        <div class="control-group">
            <label class="control-label" for="title">{$lang.video}</label>
            <div class="controls">
                <input type="text" name="title" value="{%=o.title%}"/>
            </div>
        </div>

        <div class="control-group">
            <div class="controls">
                <button class="btn btn-primary start">
                    <i class="icon-upload"></i>
                    <span>start upload</span>
                </button>
                <button class="btn btn-warning cancel">
                    <i class="icon-remove"></i>
                    <span>cancel</span>
                </button>
            </div>
        </div>
    </div>
</script>

然后，我的自定义 JS 实现：

$(function() {
    // initialize the jQuery file upload plugin
    var $fileuploadInput = $("#fileupload"); // used to clear the value
    $fileuploadInput.fileupload({
    autoUpload: false,
    add: function(e, data) {
        // add each selected file
        $.each(data.files, function(index, file) {
            // initialize the upload and attach to upload context
            var fileData = {
                title: file.name
            };
            var $upload = $(tmpl("upload-template", fileData));
            data.context = $upload;
            var $uploadRequest;

            // add click handlers for the start and cancel buttons
            var $startButton = $upload.find('button.start');
            $startButton.off('click');
            $startButton.on('click', function() {
                // add progress bar
                $upload.append('<div class="progress progress-striped active"><div class="bar" style="width:0%;font-weight:bold;"></div></div>');

                data.formData = {
                    title: $upload.find('input[name="title"]').val()
                };
                $uploadRequest = data.submit()
                        .success(function(response) {
                            console.log('upload successful');
                        }
                        else {
                            // re-enable the button
                                $startButton.removeClass('disabled');
                            }
                        })
                        .error(function() {
                            $startButton.removeClass('disabled');
                        })
                        .complete(function() {});
                $startButton.addClass('disabled');
            });
            // abort the jqXHR request object (upload) when cancel button is clicked
            var $cancelButton = $upload.find('button.cancel');
            $cancelButton.off('click');
            $cancelButton.on('click', function() {
                if ($uploadRequest) {
                    $uploadRequest.abort();
                }
                $upload.remove();
            });
            $("#uploads").append($upload);

            // add video preview
            var video = document.createElement('video');
            video.src = URL.createObjectURL(file);
            video.controls = true;
            $upload.find('.preview').append(video);
        });
    },
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        data.context
                .find('.progress .bar')
                .css('width', progress+'%')
                .text(progress+'%');
    },
    done: function(e, data) {
        data.context
                .find('.progress')
                .removeClass('active')
                .removeClass('progress-striped')
                .addClass('progress-success')
                .find('.bar')
                .css('width', '100%')
                .text('Upload Complete');
    },
    stop: function(e, data) {
        console.log('upload stopped');
    }
});
});

在您接收 PHP 文件时，您将收到一个 POST 请求，因此在 data.formData 中设置的所有字段都应该在 $_POST 中可用，并且 $_FILES 输出（var_dump）如下所示：

array(1) {
  ["files"]=>
  array(5) {
    ["name"]=>
    array(1) {
      [0]=>
      string(12) "6a19440e.mp4"
    }
    ["type"]=>
    array(1) {
      [0]=>
      string(9) "video/mp4"
    }
    ["tmp_name"]=>
    array(1) {
      [0]=>
      string(23) "C:\xampp\tmp\phpEED.tmp"
    }
    ["error"]=>
    array(1) {
      [0]=>
      int(0)
    }
    ["size"]=>
    array(1) {
      [0]=>
      int(6068582)
    }
  }
}

您将正常处理文件上传的其余部分。这对我来说仍然是一项正在进行的工作。一旦我完成了这个实现，我会根据要求更新到一个完全工作的脚本。

于 2013-10-09T05:32:54.090 回答