In today’s Web development, it is inevitable to do a picture preview function. For example, in the case of uploading pictures, a very simple way is to upload pictures to the server, then return the URL of the file, and asynchronously load the uploaded pictures through the URL to achieve the preview of pictures. Obviously there are two Web requests, one to send the file, one to download the file, and at the end if the file is deleted on the client (cancel the upload, discard the upload), the whole process is wasted. We want to be able to preview images before they are uploaded to avoid unnecessary network requests and waiting times. The following sections focus on this topic.

Local Image preview

Local image preview in IE (accessed as a local file)

In IE can be very convenient to achieve the image preview of the local web page, IE in the file object value attribute, store is to upload the complete path of the file, In IE, you just need to set the full path as the SRC attribute of an Image object to preview the uploaded Image in the Image object.

In IE, the following methods are available:

var url;

var fileobj = document.getElementById(sourceId);

fileobj.select();

url = document.selection.createRange().text;

or

var url = document.getElementById(sourceId).value;

Img SRC can preview local images directly from the path obtained by the two methods (file:/// can be added, the effect is the same). Both methods are valid for Internet explorer 7, 8, 9, 10, 11.

Local image preview for Firefox and Chrome

Use the following methods in Firefox and Chrome:

var``url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

Give the resulting values to the IMG SRC for an image preview. You might also see the following: var url = obj.files.item(0).getasdataURL (); This method of using the getAsDataURL of the Firefox File object has been deprecated since Firefox 7.0, and Firefox DOM File, probably because of its definition in the HTML5 standard.

Previewing server images

Local image preview in IE (accessed as server URL)

The local preview method mentioned above does not have the effect of preview in the form of server URL, so you need to use the following filter.

function PreviewImg(imgFile){

var newPreview = document.getElementById(``"newPreview"``);

var imgDiv = document.createElement(``"div"``);

document.body.appendChild(imgDiv);

imgDiv.style.width = "118px"``;     imgDiv.style.height = "127px"``;

imgDiv.style.filter=``"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)"``;

imgDiv.filters.item(``"DXImageTransform.Microsoft.AlphaImageLoader"``).src = imgFile.value;

newPreview.appendChild(imgDiv);

}

The above implementation works under IE7, 8, and 9, but not under IE10, 11. H2. Local image previews for Firefox and Chrome are used in Firefox and Chrome as follows:

var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

Give the resulting values to the IMG SRC for an image preview. You might also see the following:

var url = obj.files.item(0).getAsDataURL();

This method of using the getAsDataURL of the Firefox File object has been deprecated since Firefox 7.0, and Firefox DOM File, probably because of its definition in the HTML5 standard.

basis

  • In Chrome, window.URL and window.webkitURL both exist
  • In Firefox, only window. URL exists
  • In IE11 (Edge), 10 only window.url exists
  • Window. URL does not exist in Internet Explorer 7, 8, or 9
  • In Internet Explorer, you can obtain the full file path by using the Value attribute of FileObject
  • You can’t get the full path of FileObject in Chrome. You get a false path
  • In Firefox you don’t get a path at all, you get a file name
  • The files properties of FileObject cannot be obtained in Internet Explorer 7, 8, or 9

implementation

In the past, we used to use userAgent to determine the supported code by IE, Chrome, Firefox, Safari, Opera, etc. Now this method may need to be adjusted. File API is a standard feature of HTML5, so we can roughly divide browsers into two categories. One is a class that supports HTML5, and one that doesn’t.

<``html xmlns="http://www.w3.org/1999/xhtml">

<``head id="Head1">

<``meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<``style type="text/css">

.image_container {

width: 48px;

height: 48px;

position: relative;

}

</``style``>

<``script type="text/javascript" src="jquery.js"></``script``>

<``script language="javascript">

$(function() {

$("#file_upload").change(function() {

var $file = $(this);

var fileObj = $file[0];

var windowURL = window.URL || window.webkitURL;

var dataURL;

var $img = $("#preview");

if(fileObj && fileObj.files && fileObj.files[0]){

dataURL = windowURL.createObjectURL(fileObj.files[0]);

$img.attr('src',dataURL);

}else{

dataURL = $file.val();

// $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');

// var imgObj = document.getElementById("preview");

// imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\") ";

// imgObj.style.width = "48px";

// imgObj.style.height = "48px";

var imgObj = document.getElementById("preview");

// Two pits:

// When setting the filter attribute, the element must already exist in the DOM tree. Dynamically created nodes also need to be added to the DOM before setting the attribute. Setting the attribute first will not work.

// the SRC attribute needs to be added in the following way.

imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

}

});

});

</``script``>

</``head``>

<``body``>

<``div id="demo">

<``input id="file_upload" type="file" />

<``div class="image_container">

<``img id="preview" width="60" height="60">

</``div``>

</``div``>

</``body``>

</``html``>