Question

我使用来自https://github.com/blueimp/jQuery-File-Upload

的插件

我的脚本加载顺序是：

jquery.js，angular.js，jquery.ui.widget.js，jquery.iframe-transport.js，jquery.fileupload.js，jquery.fileupload-process.js，jquery.fileupload-validate.js，jquery .fileupload-angular.js

我的控制器是：

$scope.profileUploadOptions = {
        url: API_URL + "images/user",
        maxFileSize: 50,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        forceIframeTransport: false,
        add: function(e, data) {

            $.each(data.files, function (index, file) {
                console.log("Added file: " + file.name);
            });

            console.log(data);

        },
        start: function(e) {

            console.log("Uploads started");

        },
        stop: function (e) {

            console.log("Uploads finished");

        },
        change: function (e, data) {

            $.each(data.files, function (index, file) {
                console.log("Changed file: " + file.name);
            });

        },
        progress: function(e, data) {

            var progress = parseInt(data.loaded / data.total * 100, 10);
            console.log("Progress: " + progress);

        },
        progressAll: function (e, data) {

            var progress = parseInt(data.loaded / data.total * 100, 10);
            console.log("Progress: " + progress);

        },
        done: function(e, data) {

            console.log("Done: ");
            console.log(data);

        },
        fail: function(e, data) {

            console.log("Fail: ");
            console.log(data);

        },
        always: function(e, data) {

            console.log("Always: ");
            console.log(data);

        }

    };

如何从浏览窗口浏览单个文件后提交上传，如果文件类型不在acceptFileTypes Regex中，或者大于maxFileSize，我可以处理错误？

Answer 1

插件documentation应该回答您关于自动上传的问题，并且有一个host of examples很容易找到关于设置问题的文件输入部分的信息。

在提交上传之前验证文件this posed answer, pasted below, is a good starting point。

$fileInput.fileupload({
  url: 'upload_url',
  type: 'POST',
  dataType: 'json',
  autoUpload: false,
  disableValidation: false,
  maxFileSize: 1024 * 1024,
  messages: {
    maxFileSize: 'File exceeds maximum allowed size of 1MB',
  }  
});

$fileInput.on('fileuploadadd', function(evt, data) {
    var $this = $(this);
    var validation = data.process(function () {
        return $this.fileupload('process', data);
    });

    validation.done(function() {
        makeAjaxCall('some_other_url', { fileName: data.files[0].name, fileSizeInBytes: data.files[0].size })
        .done(function(resp) {
            data.formData = data.formData || {};
            data.formData.someData = resp.SomeData;
            data.submit();
        });
    });
    validation.fail(function(data) {
        console.log('Upload error: ' + data.files[0].error);
    });
});

使用其他作者的代码，可以在validation.fail处理程序中实现提供用户反馈。

上传前Jquery文件上传autoupload和前端验证

1 个答案: