3

こんにちは、jQuery-File-Upload プラグインの外観は気に入っていますが、適切な部分から綿毛のコードを削除するのがいかに難しいかは正気ではありません。

簡単に言えば、コードの一部ではない場合は機能しますが、それ自体の外部に実装すると壊れます

例えば：

  • index.html の例は、実際のコードで使用したくない/使用できない外部 URL 参照を含む RIDDLED です。私がそれを切り取って傾けようとすると、壊れてしまい、注ぐには多すぎます.
  • ドキュメントは、自分が何を望んでいるのかを知っている実際の開発者にとっては、あまりにも「深い」プロセスに始まります。「単純な」例はありません。コンテキストを想定した「仮定」の例があります。
  • 誰かが私自身のindex.phpで私を助けてくれますか?それは、私がそれを置く実際のphpファイルをターゲットにする方法、どのパラメータが送信されるか(その後のdb更新のために)、できるだけシンプルで軽い方法で教えてくれますか?設定でアップロードディレクトリを指定する場所、「通常の」何かを行う方法は隠されています..第一原則は常に最善ですが、それらはありません。
  • 簡単に言えば、通常の "file_upload" htmlform シナリオを jQuery-File-Upload の素敵な GUI バージョンに置き換えたいのですが、半分も難しいです!

コードの本当のビットはどこにありますか!

講義を受ける前に、これは約9か月にわたってこれを実装する3回目または4回目の試みであり、各インストールで〜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

だから私はこれで1週間以上髪を抜いていて、あなたの痛みを感じています. 私は何かをうまく動かすことができました.多くの有用な情報を見つけるのに苦労したので、これについて適切なステップバイステップの記事/ブログ投稿をどこかに書くことを計画しています.

最終的にこれを適切に実装する方法は、基本的なプラグインを実装し、残りのユーザー インターフェイスを手動で構築することでした。私の要件は、アップロードごとに追加のフォーム フィールドを持つ複数ファイルのアップロードでした。

基本的なプラグインを使用するときは、必ず時間を節約し、UI バージョンで使用するテンプレート エンジン (前述の外部 URL 参照の 1 つ) を取得してください。それぞれにロードするテンプレートがあると本当に役立ちます。アップロード。

必要な 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 に答える