Maison >interface Web >js tutoriel >Implémenter un aperçu d'image local basé sur JavaScript
L'exemple de cet article partage le code spécifique pour l'aperçu de l'image locale js pour votre référence. Le contenu spécifique est le suivant
<!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的. 在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<input />,<hr /> --> <html> <head> <meta charset="utf8"> <style> input[type=radio] { /* 按钮与文字对齐 */ vertical-align:middle; } input[type=file] { display: block; } #img { width: 200px; height: 200px; border: 1px solid black; margin-top: 10px; } </style> </head> <body> <input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader <input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL <hr> <input type="file" id="imgFile" onChange="imgChange()" value="test.jpg"> <img id="img" alt="Implémenter un aperçu d'image local basé sur JavaScript" > <script> var previewTypes = document.getElementsByName("previewType"); var imgFile = document.getElementById("imgFile"); var img = document.getElementById("img"); function getPreviewType() { for(var i=0; i<previewTypes.length; i++) { if(previewTypes[i].checked) { return previewTypes[i].value; } } } function onPreviewTypeChange() { imgChange(event.target.value); } function imgChange(type) { img.src = ""; var files = imgFile.files; console.log(files); if(!files || files.length === 0) { return; } var file = files[0]; if(!type) { type = getPreviewType(); if(!type) { return; } } switch(type) { case "fileReader": var fr = new FileReader(); fr.onload = function(progressEvent) { console.log(progressEvent); img.src = progressEvent.target.result; } fr.readAsDataURL(file); break; case "createURL": img.onload = function() { //释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。 URL.revokeObjectURL(img.src); } img.src = URL.createObjectURL(file); break; } } </script> </body> </html>
fileReader.readAsDataURL
URL.createObjectURLOn peut voir que l'URL commence en fait par "blob:", suivi d'une structure UUID 32 bits (8-4-4-4-12). Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra le site Web PHP chinois. Pour plus d'articles liés à l'aperçu d'image local basé sur JavaScript, veuillez faire attention au site Web PHP chinois !