andriajah Fri Jul 2020 2 years ago

Bagaimana Mengijinkan Hanya Gambar untuk Diupload di Dropzone JS?

Dalam tutorial ini kita akan membahas demonstrasi dropzone yang memungkinkan hanya gambar untuk diunggah. Anda dapat melihat dropzone hanya menerima gambar. Di sini Anda akan belajar dropzone dan hanya mengizinkan pdf untuk mengunggah. dropzone hanya menerima contoh file csv. saya jelaskan hanya langkah demi langkah yang memungkinkan hanya gambar dalam file yang diupload dropzone js.

Kadang-kadang kita hanya perlu mengizinkan gambar atau hanya mengunggah file pdf atau mengijinkan hanya file csv untuk diunggah di dropzone js. maka saya akan membantu Anda cara mengatur opsi jenis mime untuk menerima hanya jenis file yang diperlukan.

Dropzone menyediakan opsi File yang diterima di mana Anda dapat mengatur daftar jenis file Anda. Jika Anda hanya ingin mengizinkan gambar atau pdf atau csv maka Anda dapat melihat solusi di bawah ini.

Izinkan Hanya Gambar:

Dropzone.options.imageUpload = {
    maxFilesize:10,
    acceptedFiles: ".jpeg,.jpg,.png,.gif"
};

Hanya Bolehkan PDF:

Dropzone.options.imageUpload = {
    maxFilesize:10,
    acceptedFiles: ".pdf"
};

Hanya Izinkan CSV:

Dropzone.options.imageUpload = {
maxFilesize:10,
acceptedFiles: ".csv"
};

Contoh:

<html>
<head>
  <title>How to Allow Only Images to Upload in Dropzone JS?</title>
  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>How to Allow Only Images to Upload in Dropzone JS? - ItSolutionStuff.com</h2>
      <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
        <div>
          <h3>Upload Multiple Image By Click On Box</h3>
        </div>
      </form>
    </div>
  </div>
</div>
  
<script type="text/javascript">
  
    Dropzone.autoDiscover = false;
  
    var myDropzone = new Dropzone(".dropzone", { 
       maxFilesize: 10,
       acceptedFiles: ".jpeg,.jpg,.png,.gif"
    });
      
</script>
  
</body>
</html>

Saya harap ini dapat membantu Anda ...

 

dropzone js