JSFiddle - React, Tailwind, and code Playground

by eda yildiz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" accept="video/*, image/*" id="file" name="file[]" class="inputfile " multiple="multiple" data-id="1" />
  <label for="file">Ekle</label>
</form>
<div id="perde">
  <div id="sabit-cerceve">
    <div class="str" id="onizleme">

    </div>
    <div class="str">
      <div class="pop-buton" id="yukle">Onay</div>
      <div class="pop-buton" id="vazgec">Vazgeç</div>
    </div>
  </div>

</div>

CSS

#perde {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, .7);
}

#sabit-cerceve {
  position: absolute;
  width: 350px;
  border: 1px solid #CF000F;
  background-color: white;
  border-radius: 5px;
  padding: 15px;
  /* margin: auto; */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 4000;
}

#onizleme>video {
  width: 100%;
}

.pop-buton {
  display: inline-block;
  background-color: white;
  float: right;
  padding: 10px;
  border-radius: 5px;
  font-size: 1em;
  font-weight: 700;
  margin: 5px;
}

#vazgec {
  border: 1px solid #CF000F;
}

#vazgec:hover {
  background-color: #CF000F;
  color: white;
  cursor: pointer;
}

#yukle {
  border: 1px solid #65c3ad;
}

#yukle:hover {
  background-color: #65c3ad;
  color: white;
  cursor: pointer;
}

JavaScript

$('#file').on("change", function(evt) {
  var formData = "";
  var files = evt.target.files;
  for (var i = 0; i < files.length; i++) {
    if (files[i].type.match("video/*")) {
      var source = URL.createObjectURL(files[i]);
      var blob = dataURLToBlob(source);
      var video = document.createElement('video');
      video.src = source;
      video.autoPlay = true;
      video.controls = true;
      $('#onizleme').append(video);
      // var form=document.getElementById("uploadForm");
      //formData= new FormData(form);
      formData = new FormData();
      formData.append("video", blob);

    }
  }
	$("#perde").show();
})

$(document).on("click", "#yukle", function() {

  formData.append("fotoid", id);

  $.ajax({
    url: "video.php",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data) {
      console.log(data);
    }
  }).done(function() {
    $("#onizleme").empty();
    $("#perde").hide();
    uyar("Fotoğraf yükleme işlemi tamamlandı.");
  });

});
	$(document).on("click","#vazgec", function () {
		$("#onizleme").empty();
		$("#perde").hide();
		
		uyar("Fotoğraf yükleme işlemi iptal edildi.");

 
	});
var dataURLToBlob = function(dataURL) {
  var BASE64_MARKER = ';base64,';
  if (dataURL.indexOf(BASE64_MARKER) == -1) {
    var parts = dataURL.split(',');
    var contentType = parts[0].split(':')[1];
    var raw = parts[1];

    return new Blob([raw], {
      type: contentType
    });
  }

  var parts = dataURL.split(BASE64_MARKER);
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;

  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {
    type: contentType
  });
}