纯js上传文件很好用

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

转载于:https://www.cnblogs.com/gaogaoxingxing/p/7680453.html

纯js上传文件很好用相关推荐

七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
Java使用OSS进度条方法上传文件很慢
博主介绍: 22届计科专业毕业,来自湖南,主要是在CSDN记录一些自己在Java开发过程中遇到的一些问题,欢迎大家一起讨论学习,也欢迎大家的批评指正. 文章目录前言正文业务场景实现逻辑遇到的 ...
风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转废话不多说,上全部代码: < ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
[原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
html表单调用js文件上传,简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下一.用input完成上传,效果图如选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...
关于原生html和js上传文件的处理
目录基本结构样式处理为啥要做样式处理怎么处理样式 input内用到的属性及用法 accept 可以上传的文件类型获取上传后的文件 sth.files 字段解释获取视频文件的时长获取上传后 ...
Node.js 上传文件(multiparty包) (基于express)
文件上传.js: //文件上传插件的使用 multiparty包 /* body-parser包只能处理post请求,不能上传图片. multiparty包post请求和文件都可以处理 1.cnpm ...

纯js上传文件很好用

纯js上传文件很好用相关推荐

最新文章

热门文章

纯js上传文件 很好用

纯js上传文件 很好用相关推荐

最新文章

热门文章

纯js上传文件很好用

纯js上传文件很好用相关推荐