HTML5 多檔案上傳和檔案操作
阿新 • • 發佈:2019-02-06
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <title>example: file upload</title> <script type="text/javascript"> $(function(){ $('#showfilename').click(function(e){ var filelist = document.getElementById('files').files; for(var i=0; i<filelist.length; i++){ $('#name').append('<span>'+filelist[i].name+'</span><br>'); } }) $('#showfilecontent').click(function(e){ var file = document.getElementById('files').files[0]; var reader = new FileReader(); reader.readAsText(file); reader.onload = function(e){ var content = this.result; $('#content').append('<span>'+content+'</span><br>'); } }) $('#showimage').click(function(e){ var file = document.getElementById('files').files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var url = this.result; $('#image').append('<img alt='+file.name+' src='+url+'><br>'); } }) }) </script> </head> <body> <form action="/home"> <input type=file multiple="multiple" name=files id=files ><br> <input type=button value="show file name" id=showfilename><br> <input type=button value="show file content" id=showfilecontent ><br> <input type=button value="show image" id=showimage ><br> File name:<br> <div id=name></div><br> File content:<br> <div id=content></div><br> Show image:<br> <div id=image></div><br> </form> </body> </html>
參考檔案:
http://www.w3.org/TR/FileAPI/
http://www.cnblogs.com/fly_dragon/archive/2012/06/02/2532035.html