File对象与File对象
Blob对象
FileReader对象
File对象
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <script type="text/javascript"> function showFileName() { var file; for (var i = 0; i < document.getElementById("file").files.length; i++) { file = document.getElementById("file").files[i]; console.log(file.name); } } </script> </head> <body> <input type="file" id="file" multiple> /*File对象 multiple熟悉允许多个file*/ <input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/ </body> </html>
Blob对象
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <script type="text/javascript"> function showFileInfo() { var file; for (var i = 0; i < document.getElementById("file").files.length; i++) { file = document.getElementById("file").files[i]; var size = document.getElementById("size");//文件大小 单位Byte size.innerHTML = file.size; var type = document.getElementById("type");//文件类型 type.innerHTML = file.type; if (!/image/w+/.test(file.type))/*正则表达式判断是否为图片格式*/ alert("请插入图片"); else console.log("OK"); //打开浏览器审查元素 在console中显示 } } </script> </head> <body> <!--File->blob:size type--> <input type="file" id="file" multiple> <!--/*File对象 multiple熟悉允许多个file*/--> <input type="button" onclick="showFileInfo()" value="上传文件"> <!--/*显示上传的文件名*/--> <br> 文件大小： <span id="size"></span></br> 文件类型：<span id="type"></span> </body> </html>
FileReader对象