Home >Web Front-end >JS Tutorial >js uses readAsDataUrl to preview image example code
This article mainly introduces you in detailJavaScriptUsing the readAsDataUrl method to previewPictures, which has certain reference value. Interested friends can refer to it
The example of this article shares the specific code of the readAsDataUrl method preview image for your reference. The specific content is as follows
<html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function filePrevImg(files){ //检测浏览器是否支持FileReader对象 if(typeof FileReader == "undefined"){ alert("您的浏览器不支持FileReader对象!"); } var strHtml = ""; for(var intI=0;intI<files.length;intI++){ var tmpFile = files[intI]; var reader = new FileReader();//每循环一次都要重新new一个FileReader实例 reader.readAsDataURL(tmpFile); reader.onload=function(e){ alert(e.target.result); strHtml += "<img src='"+e.target.result+"' alt=''/>"; $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>"; }; } } </script> </head> <body> <fieldset> <legend>使用readAsDataUrl()方法预览图片</legend> <input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" /> <ul id="prevUpload"></ul> </fieldset> </body> </html>
[Related recommendations]
1. Free js online video tutorial
2. JavaScript Chinese Reference Manual
3. php.cn Dugu Jiujian (3) - JavaScript video tutorial
The above is the detailed content of js uses readAsDataUrl to preview image example code. For more information, please follow other related articles on the PHP Chinese website!