<!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. 基础运算符补充,流程控制之if判断/while循环

    常量 常量即指不变的量.在python中没有一个专门 的语法代表常量,程序员约定俗成地用变量名全部被大写代表常量. AGE_OF_OLDBOY = 56 基础运算符补充 1.算术运算 加减乘除+ - ...

  2. C++设计模式——单例模式（转）

    问题描述 现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能:在实际开发过程中,会专门有一个日志模块,负责写日志,由于在系统的任何地方,我们都有可能要调用日志模块中的函数,进 ...

  3. Python练习题

    内置函数 # 5.随意写一个20行以上的文件# 运行程序,先将内容读到内存中,用列表存储.# 接收用户输入页码,每页5条,仅输出当页的内容 def user_check(filename,num=5) ...

  4. Just oj 2018 C语言程序设计竞赛（高级组）H: CBT?

    H: CBT? 时间限制: 1 s      内存限制: 128 MB      提交 我的状态 题目描述 对于二叉树,如果这棵树的节点排布是按行从上到下,每行从左到右挨个放置,中间不会有空闲的节点. ...

  5. 支持向量机-SMO算法简化版

    SMO:序列最小优化 SMO算法:将大优化问题分解为多个小优化问题来求解 SMO算法的目标是求出一系列的alpha和b,一旦求出这些alpha,就很容易计算出权重向量w,并得到分隔超平面 工作原理:每 ...

  6. 20165323 实验三 敏捷开发与XP实践

    一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:杨金川 学号:20165323 指导教师:娄嘉鹏 实验日期:2018年4月28日 实验时间:13:45 - 15:25 实验序号:实验 ...

  7. 小程序报错：request:fail错误（含https解决方案）（真机预览问题）

    问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的 新版开发者工具增加了https检查功能:可使用此功能直接本地避开ssl协议版本检查,但是此 ...

  8. mysql存储过程的学习(mysql提高执行效率之进阶过程)

    1:存储过程: 答:存储过程是sql语句和控制语句的预编译集合,以一个名称存储并作为一个单元处理:存储过程存储在数据库内,可以由应用程序调用执行,而且允许用户声明变量以及进行流程控制,存储类型可以接受 ...

  9. 第二种掌握的排序Q-Q

    #include<stdio.h> int main() {     int s[10000]={0};     int i=0,j=0,n=0,x=0;     scanf(" ...

  10. python之集合set

    1.测试 # python2和python3方法列表相同 ops23 = ['add', 'clear', 'copy', 'difference', 'difference_update', 'di ...