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

что такое URL-адрес BLOB-объектов? Почему он используется?

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

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

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

Да вы можете есть серверные способы сделать это например попробуйте 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/