I am using <input type="file">
to upload an image to my website, it works fine but the image is always encrypted to base64 as a bunch of jammed up random characters. this is causing lag for me when there is a lot of images and this takes longer to upload and receive from the server.
Is there a better way to upload an image? and to not have it in base64? This is the code that I am using for displaying the image on the page
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
// var ID is predefined
document.getElementById(ID).innerHTML = `
<image src="${oFREvent.target.result}" width="200px" height="200px" ></image>`;
};
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) {
return;
}
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
You can use URL.createObjectURL(File);
to create a url for the file (image) you want to display, then use it in the src attribute to display it.
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
var img = document.createElement("img");
img.src = URL.createObjectURL(oFile);
img.width = 200;
img.height = 200;
img.onload = function() {
URL.revokeObjectURL(this.src);
}
document.getElementById(ID).appendChild(img);
}
for a better understanding of what's going on check the docs
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.