0

我想要一个带有进程栏的 jQuery 多文件上传器。这就是我去这个网址的原因。其中有一个选项称为basic。我刚刚下载了所有文件，并且只使用了 basic.html 文件。使用 basic.html 文件代码，我可以轻松上传文件。但我想要一些限制，以便用户只能上传某种文件，如 png、jpg 和 gif。因此，为了在上传中使用限制，我检查了文档并获得了此链接。所以我混合了所有这样的代码

<div class="container">
    <!-- The fileinput-button span is used to style the file input field as button -->
    <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 -->
        <input id="fileupload" type="file" name="files[]" multiple>
    </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>
</div>

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === '' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        options: {
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        processQueue: [
            action: 'validate',
            acceptFileTypes: '@',
            disabled: '@disableValidation'
        ]
    },
    processActions: {

        validate: function (data, options) {
            if (options.disabled) {
                return data;
            }
            var dfd = $.Deferred(),
                file = data.files[data.index],
            if (!options.acceptFileTypes.test(file.type)) {
                file.error = 'Invalid file type.';
                dfd.rejectWith(this, [data]);
            } else {
                dfd.resolveWith(this, [data]);
            }
            return dfd.promise();
        }

    }
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        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');
});
</script>

但是在这里我无法上传任何文件，也无法限制上传。在我的 Firefox 控制台选项卡中的所有这些代码之后，我收到了一个错误，例如

SyntaxError: missing ] after element list
action: 'validate',

有人可以告诉我为什么会出现这个错误吗？如何解决这个问题？任何帮助和建议都将是非常可观的。谢谢..

4

1 回答 1

0

在文字对象之间缺少逗号，之后processActions

/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === '' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        options: {
          acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
          processQueue: [
              action: 'validate',
              acceptFileTypes: '@',
              disabled: '@disableValidation'
          ],
          processActions: {

              validate: function (data, options) {
                  if (options.disabled) {
                      return data;
                  }
                  var dfd = $.Deferred(),
                      file = data.files[data.index],
                  if (!options.acceptFileTypes.test(file.type)) {
                      file.error = 'Invalid file type.';
                      dfd.rejectWith(this, [data]);
                  } else {
                      dfd.resolveWith(this, [data]);
                  }
                  return dfd.promise();
              }

          },
          done: function (e, data) {
              $.each(data.result.files, function (index, file) {
                  $('<p/>').text(file.name).appendTo('#files');
              });
          },
          progressall: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
              $('#progress .progress-bar').css(
                  'width',
                  progress + '%'
              );
          }
        } // end of options
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
于 2013-08-30T20:15:53.427 回答