js HTML5 Ajax实现文件上传进度条功能(2)

日期：2020-06-10 栏目：程序人生浏览：次

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1"><title>Lumino Pro - Dashboard</title> <link href="https://www.jb51.net/__SOURCE__/css/bootstrap.min.css"> <link href="https://www.jb51.net/__SOURCE__/css/datepicker3.css"> <link href="https://www.jb51.net/__SOURCE__/css/styles.css"> <link href="https://www.jb51.net/__SOURCE__/css/Table.css"> <link href="https://www.jb51.net/__SOURCE__/css/dt.css"> <link href="https://www.jb51.net/__SOURCE__/css/plus/buttons.css"> <link href="https://www.jb51.net/__SOURCE__/css/file.css"> <link href="https://www.jb51.net/__SOURCE__/css/webuploader.css"> <link href="https://www.jb51.net/__SOURCE__/css/plus/bootstrap-switch.min.css"> <link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' type='text/css'>  </head> <body> <include file="Apps/Admin/View/include/nav.html"/> <div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> </form> <include file="Apps/Admin/View/include/menu.html"/> </div> <div> <div> <ol> <li><a href="#"><span></span></a></li> <li>Dashboard</li> </ol> </div> <div> <div> <div>Banner添加 <button type="button"><span></span>上传</button> <button type="button"><span></span>确定添加</button> </div> <div> <div> <form> <dl> <dd><label>Banner名字</label></dd> <dt> <div> <input placeholder="Banner名字" value=''> </div> </dt> <div></div> <dd><label>Banner类型:</label></dd> <dt> <div> <select> <option value='1'>首页</option> <option value='2'>内页广告</option> </select> </div> </dt> <div></div> <dd><label>Banner链接地址:</label></dd> <dt> <div> <input placeholder="Banner链接地址" value=''> </div> </dt> </dl> <dl> <dd><label>Banner上传:</label></dd> <dt> <div> <input type = 'button' value='选择文件'> <input type='file'> </div> </dt> <div></div> <dd><label>文件类型:</label></dd> <dt> <div> <div></div> </div> </dt> <div></div> <dd><label>文件上传进度:</label></dd> <dt> <div>  <progress max="100" value='0'>o(︶︿︶)o</progress> <div height:0px;></div> </div> <div> <span></span> <span></span> </div> </dt> </dl> </form> <div></div> <div> <img id ='thmb' src=''> <div> <ul> <li><span>文件大小:</span><p>22222kb</p></li> <li><span>文件路径:</span><p>22222kb</p></li> <li><span>图片高度:</span><p>22222kb</p></li> <li><span>图片宽度:</span><p>22222kb</p></li> </ul> </div> </div> </div> </div> </div> </div>  </div> <script src="https://www.jb51.net/__SOURCE__/js/jquery-1.11.1.min.js"></script> <script src="https://www.jb51.net/__SOURCE__/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/__SOURCE__/js/file.js"></script> <script type="text/javascript" src="https://www.jb51.net/__SOURCE__/js/plus/bootstrap-datetimepicker.de.js" charset="UTF-8"></script> <script src="https://www.jb51.net/__SOURCE__/js/plus/bootstrap-switch.min.js"></script> <script src="https://www.jb51.net/__SOURCE__/js/table.js"></script> <script type="text/javascript" src='https://www.jb51.net/__SOURCE__/js/lib.js'></script> <script> var data = new Object(); get.Id('files').onchange = function () { get.filepath(this,function(str){ get.Id('thmb').src = str; }); set.html(filetype,file.getName('files')); get.Id('progress').value = 0; set.html(get.Id('gress'),''); set.html(get.Tag(get.Id('fileSize'), 'span')[0], file.getSize('files') + 'KB'); set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/0kb'); } get.Id('up').onclick = function () { if(file.getSize('files')<=0) { return false; } file.upload({ form:'banner', //form的id url:'{:U('Banner/add',0,0)}', //上传请求文件的地址 //maxfile:true, //是否启用大文件上传 dataType:'json', progress:function(ev) { //--上传中的进度回掉函数 get.Id('progress').value = file.getProgress(ev); //获得上传进度用file.getProgress(ev) set.html(get.Id('gress'),file.getProgress(ev)+'%'); set.html(get.Tag(get.Id('fileSize'), 'span')[1], 'https://www.jb51.net/' + file.getProgress(ev) * (file.getSize('files') / 100 >>0) + 'KB'); }, file:'files', //--文件输入框的id //--上传完成后，后台返回的回调函数 success:function(e){ set.html(get.Tag(get.Id('fileSize'), 'span')[1], 'https://www.jb51.net/' + file.getSize('files') + 'KB'); set.html(get.Id('gress'),'上传完成'); data.bannerWidth = e.bannerWidth; data.bannerHeight = e.bannerHeight; data.bannerTyle = e.bannerTyle; data.bannerImg = e.bannerImg; } }); } get.Id('add').onclick = function () { data.name = get.Name('name')[0].value; data.type = get.Name('type')[0].value; data.link = get.Name('link')[0].value; data.act = 'add'; Call.Ajax({ type:'post', // 请求方式 Loading:true, // 是否启动动画 time:5, //动画显示几秒 url:'{:U('Banner/add',0,0)}?act=add', //请求地址 data:data, //发送的数据 dataType:'json', //Ajax返回的数据类型，可以是String success:function (e) { //回调函数 set.url(e.url); } }); } </script> </body> </html>

转载注明出处：https://www.heiqu.com/wgwypg.html

js HTML5 Ajax实现文件上传进度条功能(2)

相关推荐