<!DOCTYPE html> <html lang= "zh-cn" > <head> <meta charset= "utf-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title><%= title %></title> <!-- zui --> <link rel= "stylesheet" href= "http://zui.sexy/dist/css/zui.min.css" rel= "external nofollow" > </head> <body> <div class= "container" style= "margin-top: 30px;" > <form class= "form-inline" method= "post" enctype= "multipart/form-data" > <div class= "form-group" > <input type= "file" id= "fileBig" class= "form-control" > </div> <button type= "submit" class= "btn btn-primary" >提交</button> </form> </div> <!-- ZUI Javascript 依赖 jQuery --> <script src= "http://zui.sexy/assets/jquery.js" ></script> <!-- ZUI 标准版压缩后的 JavaScript 文件 --> <script src= "http://zui.sexy/dist/js/zui.min.js" ></script> <script type= "text/javascript" > $( 'form' ).submit( function () { let file = $( ":file" )[0].files[0]; let fileName = file.name; let fileSize = file.size; console.log( 'fileSize' ,fileSize); let blockSize = 0.9*1024*1024; let num = Math.ceil(fileSize/blockSize); let start = 0; let end = 0; for (let i=1;i<=num;i++){ end = blockSize*i; if (end > fileSize){ end = fileSize; } let block = file.slice(start,end); start = end; let fd = new FormData(); fd.append( 'block' ,block); fd.append( 'name' ,fileName); fd.append( 'total' ,num); fd.append( 'index' ,i); $.ajax({ url: "upload.php" , type: "POST" , data:fd, async: true , processData: false , contentType: false , success:(res)=>{ console.log( 'res_' +i+ ":" ); console.log(res); } }) } return false ; }); </script> </body> </html> |