jQuery file upload plugin error

Question

I am trying to implement the basic fileupload from blueimp file upload plugin:

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

each time I run the code ,I select 3 files to upload I get this error: Unable to get property 'files' of undefined or null reference.

Can anyone help me with this? Thanks

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');
    });

Answer 1

Try this:

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');

Answer 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>

jQuery file upload plugin error

Question

2 answers

solution1
0 2014-12-18 11:27:11

Demo

solution2
0 2014-12-18 12:35:13

jQuery file upload plugin error

Question

2 answers

solution1 0 2014-12-18 11:27:11

Demo

solution2 0 2014-12-18 12:35:13

solution1
0 2014-12-18 11:27:11

solution2
0 2014-12-18 12:35:13