jQuery-File-Upload无法正常工作：PHP jQuery - 缺少正确的依赖项。

Question

jQuery-File-Upload无法正常工作：PHP jQuery - 缺少正确的依赖项。

phpjquerymysqljquery-file-upload

3

你好，我喜欢jQuery-File-Upload插件的外观，但是它的冗余代码太多了，很难从中提取有用的部分。它似乎强制我使用一些我不想要或无法在实际代码中使用的内容。

简单来说，当它不是我的代码的一部分时，它可以工作，但是当我将它实现到我的代码之外时，它就会出问题。

例如：

index.html示例中充斥着我不需要/不能在我的实际代码中使用的外部URL引用。当我将其删除并尝试简化它时，它就会崩溃，而且需要检查的内容太多。
文档对于真正知道自己需要什么的开发者来说，开始得太“深入”了——没有“简单”的示例，只有基于假设您的上下文的“默认”示例。
有人能帮我创建一个自己的index.php文件吗？告诉我如何以尽可能简单轻便的方式定位我放置的实际php文件，发送哪些参数（为我之后可能进行的任何后续数据库更新），在设置中指定上传目录的位置，如何隐藏任何“常规”操作。原则上，最好始终从基础开始，但它们并不存在。
简单来说：我想用jQuery-File-Upload的漂亮GUI版本替换正常的“file_upload”html表单方案，但这太难了！

真正有用的代码在哪里！

在我受到训斥之前，我要声明，在过去的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">‹</a>
            <a class="next">›</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]-->

- user26676

也许可以附上插件的链接，这样大家就知道你在说什么了。我也想实现这个功能，但是因为它太复杂了，所以我选择了dropzonejs。并不是说BlueImp不好，只是我个人无法让它正常工作。 - jdepypere

好的，抱歉这是一个“标签”，所以我认为没有必要链接它 - 我会进行编辑。 - user26676

你所付出的就是你所得到的。另一个选择是Fine Uploader（http://fineuploader.com）。Fine Uploader由库的实际开发人员支持（而不是随机用户）。它每天都在进行大量开发，并计划未来推出重大功能。 - Ray Nicholus

不太确定“一分钱一分货”的提法：你是在暗示我不感激吗？我只能说这是一个好主意，但实现得不够好。 :-) - user26676

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thorne51 · Accepted Answer

我已经为这个问题努力了一个多星期，感同身受。最终我成功实现了它，并计划在某处写一份逐步指南/博客文章，因为我很难找到有用的信息。

我最终是通过实现基本插件，并手动构建其余的用户界面，来正确实现此功能的。我的要求是需要具备附加表单字段的多文件上传功能。

当使用基本插件时，请确保节省时间并获取它们在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请求，因此数据.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)
    }
  }
}

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