Что такое BLOB URL и почему он используется?

что такое blob url? Почему он используется?

BLOB-это просто последовательность байтов. Браузер распознает его как поток байтов. Он используется для получения потока байтов из источника.

объект Blob представляет собой файлоподобный объект неизменяемых необработанных данных. Blobs представляют данные, которые не обязательно находятся в формате JavaScript. Интерфейс файла основан на Blob, наследуя функциональность blob и расширяя его для поддержки файлов на пользовательском система.

могу ли я сделать свой собственный url blob на сервере?

Да, вы можете есть несколько способов сделать это, например, попробовать http://php.net/manual/en/function.ibase-blob-echo.php

подробнее о

• https://developer.mozilla.org/pl/docs/Web/API/Blob
• http://www.w3.org/TR/FileAPI/#dfn-Blob
• https://url.spec.whatwg.org/#urls

эта функция JavaScript хочет показать разницу между Blob FileAPI, и сведения api для загрузки JSON файл в браузере клиента:

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @author Loreto Parisi
*/
var saveAsFile = function(fileName,fileContents) {
    if(typeof(Blob)!='undefined') { // using Blob
        var textFileAsBlob = new Blob([fileContents], { type: 'text/plain' });
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        }
        else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else {
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
}//saveAsFile

называли saveAsFile('out.json',jsonString); создаст ByteStream сразу распознается браузером, который будет загружать сгенерированный файл непосредственно с помощью API файла URL.createObjectURL. В else можно увидеть тот же результат получен через href элемент плюс api данных, но это имеет несколько ограничений, что Blob API не.

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @author Loreto Parisi
 */
var saveAsFile = function(fileName, fileContents) {
  if (typeof(Blob) != 'undefined') { // using Blob
    var textFileAsBlob = new Blob([fileContents], {
      type: 'text/plain'
    });
    var downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    if (window.webkitURL != null) {
      downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
      downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
      downloadLink.onclick = document.body.removeChild(event.target);
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
    }
    downloadLink.click();
  } else {
    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.onclick = document.body.removeChild(event.target);
    pp.click();
  }
} //saveAsFile

var jsonObject = {
  "name": "John",
  "age": 30,
  "car": null
};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));

Я изменил рабочее решение для обработки обоих случаев.. когда видео загружено и когда изображение загружено .. надеюсь, это поможет.

HTML-код продолжительность:

на JavaScript

var fileEl = document.querySelector("input");

fileEl.onchange = function(e) {

  var file = e.target.files[0]; // selected file

  if (!file) {
    console.log("nothing here");
    return;
  }

  console.log(file);
  console.log('file.size-' + file.size);
  console.log('file.type-' + file.type);
  console.log('file.acutalName-' + file.name);

  let start = performance.now();

  var mime = file.type, // store mime for later
    rd = new FileReader(); // create a FileReader

            if (/video/.test(mime)) {

  rd.onload = function(e) { // when file has read:


    var blob = new Blob([e.target.result], {
        type: mime
      }), // create a blob of buffer
      url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
        video = document.createElement("video"); // create video element
    //console.log(blob);
      video.preload = "metadata"; // preload setting

      video.addEventListener("loadedmetadata", function() { // when enough data loads
        console.log('video.duration-' + video.duration);
        console.log('video.videoHeight-' + video.videoHeight);
        console.log('video.videoWidth-' + video.videoWidth);
      //document.querySelector("div")
      //  .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
      (URL || webkitURL).revokeObjectURL(url); // clean up

      console.log(start - performance.now());
      // ... continue from here ...

    });
    video.src = url; // start video load
  };
  } else if (/image/.test(mime)) {
    rd.onload = function(e) { 

      var blob = new Blob([e.target.result], {type: mime}),
                url = URL.createObjectURL(blob),
                img = new Image();

      img.onload = function() {
                            console.log('image');
                            console.dir('this.height-' + this.height);
          console.dir('this.width-' + this.width);
                            URL.revokeObjectURL(this.src);     // clean-up memory
          console.log(start - performance.now());// add image to DOM
      }

                    img.src = url;

    };
  }

  var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
  rd.readAsArrayBuffer(chunk); // read file object

};

URL-адрес jsFiddle

https://jsfiddle.net/PratapDessai/0sp3b159/