1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传测试</title> </head> <style type="text/css"> .div1_inputstyle { font-family: Microsoft Yahei; float: left; height: 41px; background: #f5696c; width: 144px; position: relative; } .div2_inputstyle { color: white; text-align: center; padding-top: 12px; font-size: 15px; font-weight: 800; } .inputstyle { width: 144px; height: 41px; cursor: pointer; font-size: 30px; outline: medium none; position: absolute; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; left: 0px; top: 0px; } </style> <body> <div class="div1_inputstyle"> <div class="div2_inputstyle">上传文件</div> <input type="file" class="inputstyle" id="file_input"> </div> </body> <script> document.getElementById("file_input").addEventListener("change",function() { var uploadFile = document.getElementById("file_input"); if(uploadFile.value==""){ return; } var fReader = new FileReader(); var file = uploadFile.files[0]; fReader.onload=function(e){ var data = e.target.result; console.log("-----file data-----\n",data) } fReader.readAsBinaryString(file); });
</script> </html>
|