【问题标题】：jQuery file upload plugin errorjQuery文件上传插件错误
【发布时间】：2015-02-17 03:42:20
【问题描述】：

我正在尝试从 blueimp 文件上传插件实现基本文件上传：

http://blueimp.github.io/jQuery-File-Upload/basic.html

每次运行代码时，我都会选择 3 个要上传的文件，我会收到此错误：无法获取未定义或空引用的属性“文件”。

谁能帮我解决这个问题？谢谢

var url = 'FileUploadHandler.ashx?upload=start';
        $('#fileupload').fileupload({       
            dataType: 'json',
            multipart:true,
            limitMultiFileUploads: 3,
            url: url,
            add: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
                data.submit();
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });

【问题讨论】：

data.result 没有文件
即使我点击上传，然后选择 3 个文件，我也会收到此错误。

标签： javascript jquery

【解决方案1】：

试试这个：

Demo

var url = 'FileUploadHandler.ashx?upload=start';
$('#fileupload').fileupload({       
    dataType: 'json',
    multipart:true,
    limitMultiFileUploads: 3,
    url: url,
    add: function (e, data) {
        $.each(data.files, function (index, file) {
            $('<p/>').text(file.name).appendTo('#files');
        });
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

【讨论】：

您好，感谢您的帮助。但是现在还有一个问题。进度条不工作了。
你有什么尝试修复进度条？显示代码，以便我可以调整它。
您好，请看下面，我已经更改了一些东西，每次单击选择文件时，图像名称和上传按钮都会出现，我想要每张图像的进度，当我单击上传时，应显示进度。谢谢

【解决方案2】：

<script>
    /*jslint unparam: true */
    /*global window, $ */
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:


        var url = 'FileUploadHandler.ashx?upload=start',

        uploadButton = $('<button/>')
               .addClass('btn btn-primary')
               .prop('disabled', false)
               .text('Upload')
               .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: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        }).on('fileuploadadd', function (e, data) {
            data.context = $('<div/>').appendTo('#files');
            $.each(data.files, function (index, file) {
                var node = $('<p/>')
                        .append($('<span/>').text(file.name));
                if (!index) {
                    node
                         .append('<br>')
                         .append(uploadButton.clone(true).data(data));

                }
                node.appendTo(data.context);
            });
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );

        });
    });


</script>

</head>
<body>
    <form id="form1" runat="server">
            <span class="btn btn-success fileinput-button"> 
         <i class="glyphicon glyphicon-plus"></i> 
         <span>Select files...</span> 
         <!-- The file input field used as target for the file upload widget --> 

         <asp:FileUpload ID="fileupload" runat="server" AllowMultiple="true" />

     </span> 
     <br/> 
     <br/> 
     <!-- The global progress bar --> 
     <div id="progress" class="progress"> 
         <div class="progress-bar progress-bar-success"></div> 
     </div> 
     <!-- The container for the uploaded files --> 
     <div id="files" class="files"></div> 

        <br/> 

    </form>
</body>

【讨论】：