純js上傳檔案
阿新 • • 發佈：2019-01-10
參考文件：http://www.cnblogs.com/tianyuchen/p/5594641.html
參考文件：http://blog.csdn.net/anwenxixi/article/details/48244655
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引數設定</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="shortcut icon" href="favicon.ico"> <link href="ByFrame/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> <link href="ByFrame/css/font-awesome.css?v=4.4.0" rel="stylesheet"> <link href="ByFrame/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"> <link href="ByFrame/css/animate.css" rel="stylesheet"> <link href="ByFrame/css/style.css?v=4.1.0" rel="stylesheet"> <!-- 外掛css --> <link href="ByFrame/css/plugins/iCheck/custom.css" rel="stylesheet"> </head> <!-- 全域性js --> <script src="ByFrame/js/jquery.min.js?v=2.1.4"></script> <script src="ByFrame/js/bootstrap.min.js?v=3.3.6"></script> <script src="ByFrame/js/plugins/metisMenu/jquery.metisMenu.js"></script> <script src="ByFrame/js/plugins/slimscroll/jquery.slimscroll.min.js"></script> <script src="ByFrame/js/plugins/layer/layer.min.js"></script> <!-- 第三方外掛 --> <script src="ByFrame/js/plugins/pace/pace.min.js"></script> <!-- iCheck --> <script src="ByFrame/js/plugins/iCheck/icheck.min.js"></script> <!-- Bootstrap table --> <script src="ByFrame/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="ByFrame/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script> <script src="ByFrame/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <style> .col-center-block { float: none; display: block; margin-left: auto; margin-right: auto; } .file { position: relative; /* display: inline-block; */ background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; } </style> <body class="gray-bg"> <div class="col-sm"> <!-- modal1--> <div class="modal inmodal" id="modal1" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" style="width: 400px"> <div class="modal-content animated fadeIn"> <div class="modal-header" style="padding: 10px 8px 8px 0px"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h6 id="yhTitle" class="modal-title">新增廣告</h6> </div> <div class="modal-body" style="width: 100%; padding: 5px 0px 5px 0px"> <div class="form-group row" style="text-align: center;"> <label class="col-xs-1 col-sm-3 control-label">廣告標題:</label> <div class="col-sm-8 "> <input id="title" type="text" class="form-control"> </div> </div> <div class="form-group row" style="text-align: center;"> <!-- 上傳按鈕 --> <div class="col-xs-1 col-sm-4" style="margin-left: 2%"> <a href="javascript:;" class="file">選擇檔案 <input type="file" name="file" id="upload-file"> </a> </div> <div class="col-sm-6" style="text-align:left;font-size: 1.9rem"> <span id="fileName"></span> </div> </div> <div class="form-group row" style="text-align: center;"> <div class="col-sm-11 col-center-block" > <!-- 進度條 --> <div class="progress"> <div id="progress" data-picUrl="" class="progress-bar " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only" style="position: static;"></span> </div> </div> </div> </div> </div> <div class="modal-footer" style="lenght: 10%; padding: 5px 0px 5px 0px"> <div class="text-center"> <button type="button" class="btn btn-primary" onclick="uploadFile();">開始上傳</button> <button type="button" class="btn btn-primary" onclick="addAdvertisement();">儲存</button> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="cancleUploadFile();">取消</button> </div> </div> </div> </div> </div> <!-- modal1--> <div class="ibox float-e-margins"> <div class="ibox-title"> <div class="ibox-content"> <div class="row row-lg"> <div class="col-sm"> <div class="example"> <!-- Example Pagination --> <div class="example-wrap"> <div class="example"> <table id="advertisementTable"> </table> <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default" onclick="addAdvertisementShow();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default" onclick=""> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> <script type="text/javascript" src="js/advertisement.js"></script> <script> var xhr ; function uploadFile(){ var fileObj = document.getElementById("upload-file").files[0]; // 獲取檔案物件 var FileController = "./advertisement/uploadPic"; // 接收上傳檔案的後臺地址 if(fileObj){ console.log(fileObj); // FormData 物件 var form = new FormData(); form.append("file", fileObj);// 檔案物件 // XMLHttpRequest 物件 xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { console.log(xhr.responseText); var d = eval("(" +xhr.responseText+ ")"); //把資料轉成json //d.fileVal 後臺返回的儲存路徑 //儲存到進度條（data-picUrl）自定的屬性裡 $("#progress").attr("data-picUrl",d.fileVal) }; xhr.onerror = function(){ console.log("上傳失敗") }; //請求失敗 xhr.upload.onprogress = function(evt){ if (evt.lengthComputable) {// var progress = Math.round(evt.loaded / evt.total * 100) + "%"; $("#progress").css("width",progress); $("#progress span").text(progress); } }; xhr.upload.onloadstart = function(){//上傳開始執行方法 $("#fileName").text(fileObj.name); }; xhr.send(form); }else{ alert("未選擇檔案"); } } //取消檔案上傳 function cancleUploadFile(){ $("#fileName").text(""); $("#progress").css("width","0%"); $("#progress span").text("0%"); xhr.abort(); } $(document).ready(function() { //查詢 initAdvertisement(); }); </script> </html>