1

我正在使用 Croppie.js 在我的网站上裁剪和上传图像。但是,我发现在浏览图像时,它还会显示视频和其他格式文件,甚至正在选择它。我搜索了解决方案的文档,但找不到。它确实在文档中说明了支持 jpeg 和 png 的格式,但这只是结果。我没有找到限制显示视频文件的方法。任何帮助,将不胜感激。

代码:

  // Croppie
  var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,
    viewport: { // Default { width: 100, height: 100, type: 'square' }
        width: 300,
        height: 300,
        type: 'circle' //square
    },
    boundary: {
        width: 325,
        height: 325
    }
  });
  $('#image').on('change', function () {
    var reader = new FileReader();
      reader.onload = function (e) {
        resize.croppie('bind',{
          url: e.target.result
        }).then(function(){
          // console.log('jQuery bind complete');
        });
      }
      reader.readAsDataURL(this.files[0]);
  });
  $('.btn-upload-image').on('click', function (ev) {
    resize.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function (img) {
      var imgval = $('#image').val();
      var dataString = {
        image: img,
        imgval: imgval
      };
      $.ajax({
        type: "POST",
        dataType : "json",
        url: "processes/avatar.php",
        data: dataString,
        beforeSend: function(){
          $('.message').hide();
          $(".btn-upload-image").html('Please wait...');
        },
        success: function (json) {
          $(".message").html(json.msg).fadeIn();
          $('#preview-image').attr('src', json.preview);
          $(".btn-upload-image").html('Upload');
        }
      });
    });
  });
4

1 回答 1

1

哦,我得到了解决方案!废话,就在发布问题后的一分钟内。不用担心,答案将有助于未来的搜索者。

HTML5 支持accept属性来定义应该接受什么类型的文件。我只是以这种方式将代码放入代码中:

<input type="file" id="image" accept="image/*">
于 2020-05-30T04:55:00.867 回答