This article introduces how to convert the absolute path of an image into a file object in HTML5 and share it with everyone. The details are as follows:
To convert the absolute path of the image into base64 encoding, please see this article
Let’s first understand the basic knowledge points:
1. Understand the FileList object and file object in HTML5.In HTML5, a FileList object represents a list of files selected by the user. By adding the multipe attribute, multiple files can be selected at once within the file control. Each user-selected file in the control is a file object, and the FileList object is a list of file objects. Represents all files selected by the user. Let's first look at a simple demo to see what attributes the file object has. The following code:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Select:</label> <input type='file' multiple id= file /> <input type=button value=File upload onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; // Return all selected files for (var i = 0, ilen = files.length; i < ilen; i++) { // Print out the information of a single file object console.log(files[i]); /* * Printed The information is as follows: File { lastModified: 1457946612000 lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} name: test.html size: 796 type: text/html webkitRelativePath: */ /* If an image is uploaded, the following information will be returned: File { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10 :18:20 GMT+0800 (CST) {} name: a.jpg size: 23684 type: image/jpeg webkitRelativePath: } */ /* Therefore, if you need to determine whether the uploaded file is an image file, you can judge according to the type as follows: var file = files[i]; if (!/image// /w+/.test(file.type)) { console.log('This file is not an image file'); } else { console.log('This file is an image file'); } But if you only want to transfer images, you can add an attribute accept=image/* to the image control; we can write the code as follows: <input type='file' multiple accept = 'image/gif,image/jpeg,image/ jpg,image/png' /> */ } } </script> </body></html> 2. Understand Blob objectsKey points: In HTML5, a new Blob object is added to represent original binary data. In fact, the file object also inherits the Blob object.
The Blob object has two attributes. The size attribute represents the byte length of a Blob object, and the type attribute represents the MIME type of the Blob. If it is an unknown type, an empty string is returned.
Please look at the following code:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Select file:</label> <input type=file id=file / > <input type=button value=Show file information onClick=showFileType() /> <p>File byte length: <span id=size></span></p> <p>File type: <span id=type></span></p> </div> <script> function showFileType() { var file; // Get the first file selected by the user file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // Display the length of the file in bytes size.innerHTML = file.size; // Display the type of file type.innerHTML = file.type; // Open the console to view the returned file object console.log(file); } </script> </body></html>Note: Blob and File can be used at the same time, and FileReader can be used to read data from Blob.
The following is an absolute path image address that is converted into a base64-encoded image, and then the base64-encoded image is converted into a blob object. The code is as follows:
<!DOCTYPE html><html> <head> <title>Convert base64 image url data to Blob</title> </head> <body> <script> /** * Convert base64 image url data For Blob * @param urlData * base64 image data expressed in url mode */ function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL; var type = base64.type; var bytes = window.atob(urlData.split(',')[1]); //Remove the header of the url and convert it to byte //Handle exceptions and convert the ascii code less than 0 to greater than 0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); } /* * Convert the absolute path address of the image into base64 encoding as follows: */ function getBase64Image(img) { var canvas = document.createElement(canvas); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(.)+1).toLowerCase() ; var dataURL = canvas.toDataURL(image/+ext); return { dataURL: dataURL, type: image/+ext }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; var image = new Image(); image.crossOrigin = ''; image.src = img; image.onload = function (){ var base64 = getBase64Image(image); console.log(base64); /* The printing information is as follows: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = convertBase64UrlToBlob(base64); console.log(img2); /* The printing information is as follows: Blob {size: 9585 , type: image/jpg} */ } </script> </body></html>Note: In HTML5, a new Blob object is added to represent original binary data. In fact, the file object also inherits the Blob object. Therefore we can use the absolute address of the image to convert it into a file object.
Therefore, we can use the absolute address of the image to convert it into a file object. For a detailed demo, you can see the image upload control on my git. The plug-in first supports image uploading, and then suddenly I found that when I go to the edit page, I need to display the default image. You can also At the same time, it is supported to continue uploading new pictures when displaying pictures by default, or to delete all pictures. However, the developer only gave me the absolute address of the picture, so I have been wondering how to convert the absolute address of the picture into a file object. If I do not convert If it becomes a file object, when using this code, var reader = new FileReader(); will report an error, so you can use the blob object we talked about above to convert it into a blob object first, and then you can use the file operation object fileReader.
For detailed code, please see the image upload control on my git (https://github.com/tugenhua0707/html5UploadImage). For the effect, please see https://tugenhua0707.github.io/html5UploadImage/index.html
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.