js to upload pictures to display on the page

• html code:

<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="60" height="60">
</div>

• js code

$ (function () { 
. $ ( "# file_upload") Change (function () { 
var $ File = $ (the this); 
var fileObj File $ = [0]; 
var = windowURL window.URL || window.webkitURL; 
dataURL var; 
var $ IMG = $ ( "# preview"); 
 
IF (fileObj fileObj.files && && fileObj.files [0]) { 
dataURL = windowURL.createObjectURL (fileObj.files [0]); 
$ img.attr ( 'the src', dataURL); 
} the else { 
dataURL file.val = $ (); 
var imgObj = document.getElementById ( "preview"); 
// two pits: 
// 1, when the set filter properties, the element must have been present in the DOM tree, dynamically created Node, also need to add attributes to set before the DOM, set the properties of the added invalid; 
// 2, the src attribute needs to be added as in the following way, adding the above two modes, invalid; 
imgObj.style.filter = "ProgID: DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod = Scale)"; 
. imgObj.filters.item ( "DXImageTransform.Microsoft.AlphaImageLoader") the src = dataURL;
}
});
});