jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用

关键词：

【中文标题】jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用【英文标题】：jQuery file upload plugin - Start/Cancel button and Progress bar do not work 【发布时间】：2014-02-09 13:18:17 【问题描述】：

在文档事件就绪时，问题是：

TypeError: this.element.find(...).find(...).each(...).end(...).find(...).button(...) .end(...).find(...).button(...).end(...).find(...).button(...).end(...)。 find(...).progressbar 不是函数

jquery.fileupload-jquery-ui.js 的第 114 行。

当我尝试输入一些东西时，我在控制台中有这样的东西：

TypeError: $this.find(...).find(...).progressbar 不是函数

jquery.fileupload-jquery-ui.js 的第 45 行

TypeError: node.find(...).empty(...).progressbar 不是函数

jquery.fileupload-jquery-ui.js第60行

我评论该行不包括 jquery.fileupload-jquery-ui.js。上传文件使用选项 autoUpload:true 可以正常工作。如果 autoUpload 为 false，则不显示开始/取消按钮和进度条。

提示？

这些是我的图书馆：

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js js/vendor/jquery.ui.widget.js js/jquery.iframe-transport.js js/jquery.fileupload.js js/jquery.fileupload-process.js js/libraries/jfu/js/jquery.fileupload-image.js js/libraries/jfu/js/jquery.fileupload-audio.js js/libraries/jfu/js/jquery.fileupload-video.js js/libraries/jfu/js/jquery.fileupload-validate.js js/libraries/jfu/js/jquery.fileupload-jquery-ui.js js/main.js js/libraries/jfu/css/style.css js/libraries/jfu/css/jquery.fileupload-ui.css -

当然是 jquery-1.8.2.min.js 和 bootstrap.min.js。

这是代码：

<div class="row">
    <div class="col-2"></div>
    <div class="col-8">
        <h3 style="text-align: center;">Upload your 3D model (.3ds, .stl, .obj)</h3>
        <div id="fileupload">
            <!-- 3D rendering antaning files -->
            <div id="fileupload-render">
                <div style="text-align: center;" class="fileupload-buttonbar">
                    <label class="fileinput-button">
                        <span  class="btn btn-primary">Add files...</span>
                        <form enctype="multipart/form-data">
                            <input type="file" accept="object/*" name="files[]" multiple>
                        </form>
                    </label>
                </div>     
                <table role="presentation" class="table item">
                    <tbody id="render-files" class="files"></tbody>
                </table>
            </div>
            <!-- i files-->
            <div id="fileupload-image">
                <h3 style="text-align:center;">Upload your image (.png, .jpeg, .gif)</h3>
                <div style="text-align: center;" class="fileupload-buttonbar">
                    <label class="fileinput-button">
                        <span  class="btn btn-primary">Add files...</span>
                        <form enctype="multipart/form-data">
                            <input type="file" accept="image/*" name="files2[]" multiple>
                        </form>
                    </label>
                    <span class="fileupload-process"></span>
                </div>     
                <table role="presentation" class="table item">
                    <tbody id="image-files" class="files"></tbody>
                </table>
            </div> 
            <!-- Multimedia files -->
            <div id="fileupload-multimedia">
                <h3 style="text-align:center;">Upload your video files (.avi, .mp4, .mpeg)</h3>
                <div style="text-align: center;" class="fileupload-buttonbar">
                    <label class="fileinput-button">
                        <span  class="btn btn-primary">Add files...</span>
                        <form enctype="multipart/form-data">
                            <input type="file" accept="video/*" name="files3[]" multiple>
                        </form>
                    </label>
                </div>     
                <table role="presentation" class="table item">
                    <tbody id="multimedia-files" class="files"></tbody>
                </table>
            </div>   
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>          
        </div>
        <div style="text-align: center;">
            <a class="btn btn-success" href="<?=$this->redirect?>"><?=$this->translate("Concludi")?></a>
        </div>
    </div>
</div>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () 
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = "/item/upload-file/";
    var uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () 
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () 
                    $this.remove();
                    data.abort();
                );
            data.submit().always(function () 
                $this.remove();
            );
        );
        $('#fileupload').fileupload(
        url: url,
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|avi|stl|obj|3ds|mpeg)$/i,
//            maxFileSize: 50000000, // 5 MB
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,
    )
    .on('fileuploadadd', function (e, data) 
            //console.log("trigger: " + $(this).attr('id'));
            console.log(data.files);
            data.context = $('#files');
            //console.log(data.context);
            $.each(data.files, function (index, file) 
                var htmlcheck = $('<tr class="cover_box"></tr><tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
                htmlcheck.find('.name').text(file.name);
                htmlcheck.find('.size').text(file.size + ' kB');
                htmlcheck.find('.preview').text(file.preview);

                var html = $('<tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
                html.find('.name').text(file.name);
                html.find('.size').text(file.size + ' kB');
                html.find('.preview').text(file.preview);

                if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') 
                    data.context = $('#image-files');
                    htmlcheck.appendTo(data.context);
                
                else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') 
                    data.context = $('#multimedia-files');
                    htmlcheck.appendTo(data.context);
                
                // #TODO: find the right file.type for render-files
                else if (file.type == 'image/3ds' || file.type == 'image/stl' || file.type == 'image/obj') 
                    data.context = $('#render-files');
                    html.appendTo(data.context);
                
                else 
                    alert("Gianni, metti il formato giusto!")
                
            );
        ).on('fileuploadprocessalways', function (e, data) 
            var node = '';
            var index = data.index,
                file = data.files[index];
                if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') 
                    node = $("#image-files tr:last td:first");
                
                else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') 
                    node = $("#multimedia-files tr:last td:first");
                
                //console.log(node);
            if (file.preview)
                node.prepend(file.preview);
            if (file.error) 
                node.prepend(file.error);
            
        ).on('fileuploadprogressall', function (e, data) 
            var progress = parseInt(data.loaded / data.total * 100, 10);
            console.log(data);
            $('#progress .progress-bar').css('width', progress + '%');
            $('#percentage').html(progress + '%');
        ).on('fileuploaddone', function (e, data) 
            $.each(data.result.files, function (index, file) 
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                alert(file.type);
                $("#files tr:last td:first canvas").wrap(link);
                $('.upload-ok').html('Uploaded');
            );
        ).on('fileuploadfail', function (e, data) 
            $.each(data.result.files, function (index, file) 
                var error = $('<span/>').text(file.error);
                $(data.context.children()[index])
                    .append(error);
            );
        ).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
);
</script>
<!-- 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>
            <label><input type="checkbox" name="delete" value="1" class="unique">marck as cover</label>
        </td>

        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">%=file.name%</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            % if (!i && !o.options.autoUpload)  %
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            %  %
            % if (!i)  %
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            %  %
        </td>
    </tr>
%  %
</script>

<script>
  $('input.unique').click(function() 
  $('input.unique:checked').not(this).removeAttr('checked');
  );
</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">
                % if (file.url)  %
                    <a href="%=file.url%" title="%=file.name%" download="%=file.name%" %=file.thumbnailUrl?'data-gallery':''%>%=file.name%</a>
                %  else  %
                    <span>%=file.name%</span>
                %  %
            </p>
            % if (file.error)  %
                <div><span class="label label-danger">Error</span> %=file.error%</div>
            %  %
        </td>
        <td>
            <span class="size">%=o.formatFileSize(file.size)%</span>
        </td>
        <td>
            % if (file.deleteUrl)  %
                <button class="btn btn-danger delete" data-type="%=file.deleteType%" data-url="%=file.deleteUrl%"% if (file.deleteWithCredentials)  % data-xhr-fields='"withCredentials":true'%  %>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            %  else  %
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            %  %
        </td>
    </tr>
%  %
</script>

感谢您的帮助。

【问题讨论】：

我没有看到任何提供 progressbar 插件/小部件的库 【参考方案1】：

你错过了jquery.fileupload-ui.js

【讨论】：

没错，现在我明白了，但我仍然遇到同样的问题。谢谢。 我得到了答案，但我需要超过 10 个声望才能发布我的答案或等待 2014 年 1 月 20 日下午 7:29:05。【参考方案2】：

显然，我的错。在我的 ItemController.php 中有一行错误：

$layoutView->headScript()->appendStylesheet('http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js');

正确的：

$layoutView->headScript()->appendFile('http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js');

并评论这一行：

js/libraries/jfu/js/jquery.fileupload-jquery-ui.js

【讨论】：

jQuery 文件上传：是不是可以使用提交按钮触发上传？

】jQuery文件上传：是不是可以使用提交按钮触发上传？【英文标题】：jQueryfileupload:Isitpossibletotriggeruploadwithasubmitbutton?jQuery文件上传：是否可以使用提交按钮触发上传？【发布时间】：2012-04-1923:52:26【问题描述】：我正在使用jQue... 查看详情

jQuery 文件上传：是不是可以使用提交按钮触发上传？

】jQuery文件上传：是不是可以使用提交按钮触发上传？【英文标题】：jQueryfileupload:Isitpossibletotriggeruploadwithasubmitbutton?jQuery文件上传：是否可以使用提交按钮触发上传？【发布时间】：2012-04-1923:52:26【问题描述】：我正在使用jQue... 查看详情

如何通过单击“取消”按钮取消文件上传

】如何通过单击“取消”按钮取消文件上传【英文标题】：Howtocancelafileuploadbyclickingona\'Cancel\'button【发布时间】：2012-04-1413:13:48【问题描述】：我有一个表单，其中包含表单中的文件输入，更重要的是一个取消按钮，它应该取消... 查看详情

jquery实用美化input上传组建

  下载插件  (5)  简要教程jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件。该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式。它提供了大量的data属性来控制文件上传域的样... 查看详情

Jquery-fileupload 插件 - 上传文件但说“文件上传失败”

】Jquery-fileupload插件-上传文件但说“文件上传失败”【英文标题】：Jquery-fileuploadplugin-uploadsfilebutsays\'fileuploadfailed\'【发布时间】：2014-02-0316:26:34【问题描述】：我单击“添加文件”选择一个文件，然后创建一个缩略图（取决于... 查看详情

jquerywebuploader插件怎么取消避免重复上传.

...Uploader uploader=WebUploader.create( //自动上传。 auto:true, //swf文件路径 swf:'__PUBLIC__/Home/swf/Uploader.swf', //文件接收服务端。 server:'#:U('Feedback/uploadimg')#', //选择文件的按钮。可选。 //内部根据当前运行是创建，可... 查看详情

文件在被取消之前上传[关闭]

】文件在被取消之前上传[关闭]【英文标题】：filesgetuploadedjustbeforetheygetcancelled[closed]【发布时间】：2012-10-1219:05:49【问题描述】：这里遇到了一个小情况，我试图取消文件的上传。我所做的是，如果用户单击“取消”按钮，那... 查看详情

jquery无刷新上传插件uploadify的上传按钮不显示

使用的免费的flash版本，电脑也有flashplayer的9.0.24版本以上在浏览器上传按钮不能正常显示，这是 因为浏览器禁止了flash，需要开启flash，例：使用的谷歌浏览器 未开启flash 是这个样子，需要开启flash 下面是一个方... 查看详情

jquery文件上传插件——限制文件上传

】jquery文件上传插件——限制文件上传【英文标题】：Jqueryfileuploadplugin-restrictingfileupload【发布时间】：2013-12-1912:53:29【问题描述】：我正在使用jquery文件上传插件来上传个人资料图片。<inputtype="file"name="image"id="image"data-url="/us... 查看详情

ssi-uploader上传图片插件，点击选择文件按钮自动提交表单解决办法

先介绍一下这款插件，然后再谈使用中可能遇到的问题ssi-uploader是一个JQuery的图片上传插件，界面比较美观 github地址：https://github.com/ssbeefeater/ssi-uploader演示地址：http://ssbeefeater.github.io/#ssi-uploader/examples使用文档：http://ssbeefe... 查看详情

修改 jQuery Mobile (jqm) 文件上传按钮

】修改jQueryMobile(jqm)文件上传按钮【英文标题】：ModifyjQueryMobile(jqm)fileuploadbutton【发布时间】：2014-01-1208:49:25【问题描述】：我希望将标准文件上传按钮providedbyJQueryMobile修改为自定义文件上传按钮。（见下文）尝试了几种方法来... 查看详情

jQuery文件上传插件不调用成功回调

】jQuery文件上传插件不调用成功回调【英文标题】：jQueryfileuploadpluginnotcallingsuccesscallback【发布时间】：2012-10-0504:04:14【问题描述】：我正在使用jQuery文件上传插件，一旦文件上传完成，我想做一些自定义jQuery的东西从这里https:/... 查看详情

jquery文件上传插件大文件问题

】jquery文件上传插件大文件问题【英文标题】：jqueryfileuploadpluginlargefileissues【发布时间】：2015-05-3116:51:58【问题描述】：我正在使用Asp.NetMVC5和标准jqueryplugin。我能够将最大24MB的文件上传到MVC动作控制器。大于30MB的文件根本不... 查看详情

使用 jQuery 的“表单插件”上传 Ajax 文件

】使用jQuery的“表单插件”上传Ajax文件【英文标题】：Ajaxfileuploadwiththe"FormPlugin"forjQuery【发布时间】：2011-08-2315:08:32【问题描述】：我正在使用jQuery，我想使用Ajax上传文件。我搜索了一些，发现这是不可能的。但是，有... 查看详情

引导单选按钮由 jQuery 取消选中

】引导单选按钮由jQuery取消选中【英文标题】：BootstrapRadioButtonuncheckbyjQuery【发布时间】：2015-11-2214:14:13【问题描述】：我的代码使用引导插件时遇到问题。我在以下代码中有一些单选按钮：<divclass="btn-group"data-toggle="buttons">... 查看详情

jQuery上传文件使用jQuery的ajax方法（无插件）

】jQuery上传文件使用jQuery的ajax方法（无插件）【英文标题】：jQueryuploadfileusingjQuery\'sajaxmethod(withoutplugins)【发布时间】：2011-02-0504:26:32【问题描述】：现在我想实现图片上传，不使用任何插件。我的上传表单是这样的<formaction=... 查看详情

文件上传利器jquery上传插件uploadify

在做日常项目中，经常在后台需要上传图片等资源文件，之前使用过几次这个组件，感觉非常好用，但是每次使用的时候都是需要经过一番查阅，所以还不如记住在这里，以后使用的时候就翻翻。他的官方网站如下：http://www.uplo... 查看详情

jquery压缩图片插件

imageCompress只有图片压缩功能，比较简单jquery.imageCompress.js使用说明：el：为上传框quality：压缩图片质量，单位为％onloadStart：读取图片开始，传入文件对象onloadEnd：读取图片结束，传入图片对象oncompressStart：压缩图片开始，传入... 查看详情