Talk about JS picture front end preview of FileReader and window. Url.createobjecturl_javascript Tips

Talk about JS picture front end preview of FileReader and window. Url.createobjecturl

Preview Img:filereader mode
  document.getElementById (' Imgfile '). onchange = function (e) {5     var ele = document.getElementById (' Imgfile '). Files[0];

    var fr = new FileReader ();
    Fr.onload = function (ele) {

      var pvimg = new Image ();
      PVIMG.SRC = Ele.target.result;
      Pvimg.setattribute (' id ', ' previewimg ');

      $ ('. Preview_wrap '). html ('). Append (pvimg);
    Fr.readasdataurl (ele);
  }

Preview Img:URL.createObjectURL mode
  document.getElementById (' Imgfile '). onchange = function (e) {
    var ele = document.getElementById (' Imgfile '). Files[0];

    var createobjecturl = function (BLOB) {return
     Window[window.webkiturl? ' Webkiturl ': ' URL ' [' Createobjecturl '] (BLOB);
    var newimgdata = Createobjecturl (ele);

    var pvimg = new Image ();
    PVIMG.SRC = Newimgdata;
    Pvimg.setattribute (' id ', ' previewimg ');

    $ ('. Preview_wrap '). html ('). Append (pvimg);
  

The above first posted with FileReader and url.createobjecturl two kinds of preview mode.

According to predecessors, Creatobjecturl can have better performance, perhaps the browser with the interface of the reason, can handle faster.

Recently made a need to upload a picture preview of the project, with the simplest input file upload, the first thought is to use FileReader to realize the front-end preview, very simple, see the first paragraph of code in front of their own mobile phone test, no problem. But on some wonderful mobile phones, such as oppo Android 4.3 in our app's WebView, we can't preview the picture by opening the album Upload! But in the phone's micro-mail, browser upload all can!

Look at the following code, the following figure, because the Base64 code is missing the picture format, manual plus image/jpg picture immediately displayed, just beginning to think is readasdataurl problem, no coding success, looking for a night reason, no solution! I don't know which one is wrong. Suddenly thought of printing input file type Look, found the type is empty, and file other properties are normal.

Continue to Baidu (Google's recent company FQ instability, can not use), the result saw someone encountered a similar strange problem, but did not solve.

Inadvertently found a picture preview in addition to FileReader can also use Url.createobjecturl. 11 o'clock 26 in the evening, first catch the last train.

=====================

The next morning, the inspiration for the Midnight experiment, based on the judge input file of the type of picture, if not present to the file manually assigned value type. (See Debugging code below, a bit messy)

It turns out that the type of file is not something you can change directly by assigning it.

So I started practicing url.createobjecturl (see the second part of the code)

Magic! Found preview normal!

Looking at the code discovery, Createobjecturl gets an HTTP-formatted file that does not fail to encode even if the file type of input file does not exist.

The above is a brief introduction to the FileReader and window of JS picture front preview. Url.createobjecturl is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.