纯js上传文件 很好用
生活随笔
收集整理的這篇文章主要介紹了
纯js上传文件 很好用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>參數(shù)設(shè)置</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">廣告標(biāo)題:</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" > <!-- 進(jìn)度條 --> <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+ ")"); //把數(shù)據(jù)轉(zhuǎn)成json //d.fileVal 后臺返回的存儲路徑 //存儲到進(jìn)度條（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(){//上傳開始執(zhí)行方法
$("#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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/gaogaoxingxing/p/7680453.html
總結(jié)
以上是生活随笔為你收集整理的纯js上传文件 很好用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英伟达控制面板打不开的解决办法
- 下一篇： java你如何调字体大小_eclipse