纯js上传文件

来源：互联网发布：怎么在淘宝卖虚拟物品编辑：程序博客网时间：2024/06/05 19:00
参考文档：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><scriptsrc="ByFrame/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script><scriptsrc="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>
0 0