Upload the selected file Preview file front-end js code (Preview file javascript code)
<! doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Select File Preview File Content</title> <style> *{margin:0; border:0;padding:0; box-sizing:border-box} .wrap{width: 600px; margin: 60px auto 0;background: #fff;border: 1px solid #ccc;padding: 10px;border-radius: 6px;} .wrap input{width:100%;} #viewbox{width:600px; margin:10px auto 0;} #viewbox img,#viewbox audio,#viewbox video{width:100%;} </style> </head> <body> <div class="wrap"> <input id="file" type="file" accept="image/*, video/*,audio/*" onChange="handleChange()" /> </div> <div id="viewbox"></div> <script type="text/javascript"> function handleChange() { var file = document.getElementById("file").files[0], fileType = file.type, read = new FileReader(); document.getElementById("viewbox").innerHTML=''; read.readAsDataURL(file); read.onload = function() { var url = read.result; if(fileType.indexOf("audio/") != - 1){ var showdata = new Audio(); showdata.controls = true; }else if(fileType.indexOf("image/") != - 1){ var showdata = new Image(); }else if(fileType.indexOf("video/") != - 1){ var showdata = document.createElement("video"); showdata.controls = true; } showdata.src = url; document.getElementById("viewbox").appendChild(showdata); }; } </script> </body> </html>
-
• Js code grabs all image URLs of the page, saves them to the txt file, and downloads them locally (javascript saves the file locally) -
• A nice tag cloud js code -
• A string of js codes lists all images on the current page -
• Blueleaf share beautify file upload form select file button code -
• How to normally use webuploader to upload plug-ins in the pop-up window of the bootstrap mode box -
• Jquery seamless continuous scrolling code -
• JQUERY label switch 360 degree special effect code -
• A cute girl returns to the top code -
• CNZZ webmaster statistics code error reporting solution -
• Hidden js code that automatically copies content to the clipboard
