纯js上传文件

最新推荐文章于 2024-05-19 18:33:52 发布
我本名叫一休
最新推荐文章于 2024-05-19 18:33:52 发布
阅读量1.1w
点赞数 1
文章标签： js文件上传 js文件上传到服务器 js文件上传到后台
本文链接：https://blog.csdn.net/qq_36073929/article/details/64443613
版权
参考文档：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" οnclick="uploadFile();">开始上传</button>
							<button type="button" class="btn btn-primary" οnclick="addAdvertisement();">保存</button>
							<button type="button" class="btn btn-primary"
								data-dismiss="modal" οnclick="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"
												οnclick="addAdvertisementShow();">
												<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
											</button>
											<button id="btn_edit" type="button" class="btn btn-default"
												οnclick="">
												<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>