<!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>

纯js上传文件 很好用的更多相关文章

  1. fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传

    前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...

  2. 原生js上传文件,使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

  3. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  4. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  5. js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  6. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  7. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  8. 纯js上传控件——fineuploader

    fineuploader是一款基于ajax实现文件上传的插件,具有以下有点: A:支持文件上传进度显示. B:文件拖拽浏览器上传方式 C:Ajax页面无刷新. D:多文件上传. F:跨浏览器. E:跨 ...

  9. node.js 上传文件

    在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件,  用nodejs的话,  相当于模拟浏览器的行为. google 了一番之后,  明白了浏览器无非就 ...

随机推荐

  1. python获取信息

    import uuid import socket def get_mac(): mac=uuid.UUID(int = uuid.getnode()).hex[-12:] return " ...

  2. 全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack' ......

    全局安装的webpack   安装指令如下 cnpm install wepack -save-dev -g 但是 在我的项目空间运行webpack指令的时候 会报如下错误 为了方便抓取{ Error ...

  3. 步步为营-78-新闻展示(Ajax+Json+easyUI)

    Json:JavaScript Object Notation 1.1 Json对象的接收处理 <!DOCTYPE html> <html xmlns="http://ww ...

  4. IDEA部署项目和多余的项目删掉的演示

  5. openresty用naxsi防xss、SQL注入

    下载naxsi wget https://github.com/nbs-system/naxsi/archive/untagged-afabfc163946baa8036f.tar.gz tar zx ...

  6. [转]JAVA实现SFTP实例

    http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888384.html 最近写的一个JAVA实现SFTP的实例: /** Created ...

  7. Ubuntu14.04创建无线WiFi,android可以连接上网

    前提条件: ubuntu14.04 unity,已经通过有线连接到internet 一般环境下创建的wifi热点android设备是无法识别的,网上说通过ap-hotspot方式创建出来的热点手机可以 ...

  8. 【Android】LMK 工作机制

    Android分析之LowMemoryKiller Android Kernel 会定时执行一次检查,杀死一些进程,释放掉内存. 那么,如何来判断,那些进程是需要杀死的呢?答案就是我们的标题:Low ...

  9. 分布式系统的CAP理论

    一.CAP理论概述 一个分布式系统最多只能同时满足一致性(Consistency).可用性(Availability)和分区容错性(Partition tolerance)这三项中的两项. 二.CAP ...

  10. Mongodb查询提示com.MongoDB.MongoException: too much data for sort() with no index

    解决办法: 查询数据量太大,添加索引即可解决问题 通过scrapy爬行完数据后,通过db.wooyun.drops.ensureIndex({"datetime":1})