Angularjs文件上传只允许图像扩展答案

【问题标题】：Angular js fileupload allow only image extensionsAngularjs文件上传只允许图像扩展
【发布时间】：2019-06-11 10:08:45
【问题描述】：

这是我上传图片配置文件的指令。它工作正常，但我想知道的是我们如何过滤这个指令以只允许特定的扩展，因为我只想允许图像。顺便说一句，我正在使用fineupload。随意询问图片url下面的代码是e.target.result。

app.directive('uploadProfile', function () {
        return function (scope, element, attrs, $window) {
            var $uploadCrop;

            function readFile(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('.cropper').addClass('ready')
                        $window.alert("hi")
                        $uploadCrop.croppie('bind', {
                            url: e.target.result

                        }).then(function () {
                            console.log("do nothing")
                        });
                    }

                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    swal("Sorry - you're browser doesn't support the FileReader API");
                }
            }


            $(element).on("change", function () {
                readFile(this)
            });

            $uploadCrop = $('.cropper').croppie({
                url: "/static/img/yahshua.jpg",
                viewport: {
                    width: 170,
                    height: 170,
                    type: 'circle',
                },
                enableExif: true,
                enableZoom: true,
                enforceBoundary: false
            });

            $(element).on('change', function () { readFile(this); });

            $('#cropImage').on('click', function (ev) {
                $uploadCrop.croppie('result', {
                    type: 'base64',
                    size: 'viewport'
                }).then(function (resp) {
                    scope.record = {}
                    scope.record.cropped = resp
                    scope.main.upload_profile(resp)
                });
            });
        };
    })

【问题讨论】：

标签： javascript angularjs upload fine-uploader

【解决方案1】：

我是“文件”类型的 html 输入，您可以添加“接受”属性以将文件类型限制为仅图像： https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

【讨论】：

【解决方案2】：

查看了您的所有代码并发表了评论
解决方案是使用只需将文件输入属性设置为accept="image/*"

app.directive('uploadProfile', function () {
  return function (scope, element, attrs, $window) {
    var $uploadCrop;

    function readFile(input) {
      // if (input.files && input.files[0]) {
      // files are always avalible nowdays
      if (input.files[0]) {
        // You don't need the FileReader... (we will use object urls)
        // var reader = new FileReader();

        // reader.onload = function (e) {
          $('.cropper').addClass('ready')
          $window.alert('hi')
          $uploadCrop.croppie('bind', {
            url: URL.createObjectURL(input.files[0])
          }).then(function () {
            console.log("do nothing")
          });
        // }

        // reader.readAsDataURL(input.files[0]);
      }
      // All browswers support FileReader nowdays...
      // else {
      //   swal("Sorry - you're browser doesn't support the FileReader API");
      // }
    }

    // set file attribute's accept to "image/*" 
    // This will only allow users to only select images
    element.accept = 'image/*'

    $(element).on("change", function () {
      readFile(this)
    });

    $uploadCrop = $('.cropper').croppie({
      url: "/static/img/yahshua.jpg",
      viewport: {
        width: 170,
        height: 170,
        type: 'circle',
      },
      enableExif: true,
      enableZoom: true,
      enforceBoundary: false
    });

    // You are already doing this above
    // $(element).on('change', function () { readFile(this); });

    $('#cropImage').on('click', function (ev) {
      $uploadCrop.croppie('result', {
        type: 'base64', // I would encurage you to use blob & FormData instead
        size: 'viewport'
      }).then(function (resp) {
        scope.record = {}
        scope.record.cropped = resp
        scope.main.upload_profile(resp)
      });
    });
  };
})

【讨论】：