Image upload is an ordinary function, and image preview is an indispensable sub-function in the upload function. Before this, I used to subscribe to the onchange event of the input[type=file] element, once the path is changed, the image is uploaded to the server, and then the image path is obtained and the value is assigned to the img element. Regardless of the solution to asynchronous file submission, it is to clean up temporary preview images on the server side, which has increased the workload.
I accidentally found the relevant information about pure front-end image preview from MDN, and then sorted it out and recorded it for future reference.
1. Preparation 1──FileReader
FileReader is a new feature of HTML5 for reading data of Blob and File types. The specific usage is as follows:
(1). Construction method
var fr = new FileReader();
(2). Attributes
readyState: type is unsigned short, the current state of the FileReader instance, (EMPTY―0, no data has been loaded yet; LOADING―1, data is loading; DONE―2, all read requests have been completed), read-only.
result: The file contents read, read-only.
error: The type is DOMError, indicating an error that occurs when reading the file, read-only.
(3). Method
abort(): abort the read operation and set readyState to DONE. When no read operation is performed, calling this method will throw a DOM_FILE_ABORT_ERR exception.
readAsArrayBuffer(Blob blob): read data, the result attribute is set to ArrayBuffer type
readAsText(Blob blob [, encoding='utf-8']): read data, the result attribute is set to String type
readAsBinaryString(Blob blob): read data, result attribute is set to the original binary data
readAsDataURL(Blob blob): read data, the result attribute is set to the Data URI Scheme form (for details, please visit "JS Magic Hall: Introduction to Data URI Scheme")
(4). Event
onload: Triggered after reading data successfully
oneError: Triggered when an exception is thrown when reading data
onloadstart: Triggered before reading data
onloadend: Triggered after reading data, triggered after onload or onerror
onabort: Triggered after aborting the read
onprogress: Periodically triggered during reading
(5). Browser support
FF3.6+, Chrome7+, IE10+
2. Preparation 2──DXImageTransform.Microsoft.AlphaImageLoader filter
(1). Function: The main function is to transparently process the pictures (IE5.5~6 does not support transparent png)
(2). How to use in styles
#preview{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");}(3). How to use in JS
var preview = document.getElementById('preview');preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";(4). Attributes
enabled: optional, setting whether the filter is activated. Value range true (default), false
sizingMethod: Optional, sets how the filter-acting image is displayed within the container boundary, value range crop (cut the image to fit the container size), image (default value, increase or decrease the container size to fit the image size), scale (scaling the image to fit the container size)
src: Required, use absolute or relative URL to point to the background image. When the URL is the local address of the user computer, an exception that does not allow access to the local file system will be thrown when the src of the img element is the local address of the user computer.
Implementation
Next, we use the readAsDataURL of FileReader to obtain the Data URI Scheme to implement the image preview function, and we use the filter DXImageTransform.Microsoft.AlphaImageLoader to downgrade.
html fragment:
<style type="text/css">#preview{ width: 100px; height: 100px;}</style><!--[if lte IE 9]><style type="text/css"> #preview{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); }</style><![endif]--><input type="file" onchange="showPreview(this);"/><div id="preview"></div>js fragment:
var preview = function(el){ var pv = document.getElementById("preview"); // IE5.5~9 use filters if (pv.filters && typeof(pv.filters.item) === 'function'){ pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value; } else{ // Other browsers and IE10+ (filters do not support) use FileReader var fr = new FileReader(); fr.onload = function(evt){ var pvImg = new Image(); pvImg.style.width = pv.offsetWidth + 'px'; pvImg.style.height = pv.offsetHeight + 'px'; pvImg.src = evt.target.result; pv.removeChild(0); pv.appendChild(pvImg); }; fr.readAsDataURL(el.files[0]); }};4. Pit
Because IE11 has made security considerations, it is impossible to obtain the real address of the user's selected file through value, outerHTML and getAttribute on the input[type=file] element, and can only obtain the C:/fakepath/ file name. Therefore, if IE11 is used, but the text mode is set to below 10, there is no way to achieve image preview.
Solution 1 ──Add this sentence under the head tag: <meta http-equiv="X-UA-Compatible" content="IE=Edge"> . This will tell IE that the highest version of the current IE can be used to parse and render web pages by default.
Solution 2 ──Use document.selection.createRangeColleciton() to obtain the real address. The specific operation is as follows:
// Suppose fileEl is the [type=file] element fileEl.select();var filePath = document.select.createRangeCollection()[0].htmlText;
5. Supplement: Use window.URL.createObjectURL instead of FileReader
The Data URI Scheme obtained through the readAsDataURL method of FileReader will generate a very long base64 string. If the image is larger, the string will be longer. If the page reflow occurs, it will cause performance degradation. The solution is as follows:
1. The previewed img tag uses absolute positioning to get out of normal document flow, which has nothing to do with other elements of the document, and will not affect performance when reflowing.
2. Use window.URL.createObjectURL(Blob blob) to generate data links.
var createObjectURL = function(blob){ return window[window.webkitURL? 'webkitURL' : 'URL']['createObjectURL'](blob);};Note: The data link generated by window.URL.createObjectURL is memory-exclusive, so if you use it from time to time, you need to call window.URL.revokeObjectURL(DOMString objUrl) to free up memory. Content will also be automatically released when the page is refreshed.
var resolveObjectURL = function(blob){ window[window.webkitURL? 'webkitURL' : 'URL']['revokeObjectURL'](blob);};The above is all about this article, I hope it will be helpful to everyone's learning.