快捷搜索:

落实拖动文件上传加载进程条功效,不用for遍历

作者: w88官方网站手机版  发布:2019-08-03

透过对文本的拖动达成公文的上传,重要采纳的是HTML5的ondrop事件,上传内容通道FormData传输:

正如所示:

本文实例呈报了jQuery datatables插件实现ajax加载数据与增加和删除改查成效。分享给大家供我们仿效,具体如下:

//进度条
<div class="parent-dlg" >
 <div class="progress-label">0%</div>
 <div class="son"></div>
</div>
//要拖动到的地方
<div class="main_content_center"></div>
var provinces = res.res;
var html = [];
var option_select='<option value="" >请选择</option>';
var tpl = '<option value="{1}" data-id="{1}" data-name="{0}">{0}</option>';
html.push(option_select);

$.each(provinces, function (i, n) {
 html.push(tpl.format(n.name, n.id));
});
//alert(html.join());
$('#class').html(html.join(''));


function getXueke() {
  var gradeId = $('#grade_id').val();
  if (gradeId == '') {
   $('#textbook_id').html('<option value="">-选择-</option>');
   return;
  }
  $.get('index.php?m=Home&c=ClassList&a=getgradesandCourse', {
   'grade_id': gradeId
  }, function (res) {
   var options = [];
   $.each(res, function (index, item) {
    options.push('<option value="{0}">{1}</option>'.format(item.id, item.course_name));
   });
   if (options.length > 0) {
    $('#textbook_id').html(options.join(''));
   } else {
    $('#textbook_id').html('<option value="">-请选择-</option>');
   }
  })
 }

那边给大家享用一下本身在类型中用datatables达成ajax加载数据与增加和删除改查

js:

以上那篇jquery ajax加载数据前台渲染方式不用for遍历的方法正是小编分享给大家的全体内容了,希望能给大家多少个参阅,也指望大家多多帮忙脚本之家。

在意,须要引进jquery、datatables、layer

var dz = $('#main_content_center');
dz.ondragover = function(ev) {
 //阻止浏览器默认打开文件的操作
 ev.preventDefault();
}
dz.ondrop = function(ev) {
 ev.preventDefault();
 var files = ev.dataTransfer.files;
 var len = files.length,i = 0;
 while (i < len) {
  var filesName=files[i].name;
  var extStart=filesName.lastIndexOf(".");
  var ext=filesName.substring(extStart,filesName.length).toUpperCase();
  if(ext!=".JPG"&&ext!=".PNG"&&ext!=".XML"){ //判断是否是需要的问件类型
  TS.errorAlert("请选择.jpg、.png、.xml类型的文件上传!");
  return false;
  }else{
  test(files[i]);
  }
  i  ;
 }
 $(".parent-dlg").show();
}
function test(a){
 var formData = new FormData();
 formData.append("name", a.name);
 formData.append("size", a.size);
 formData.append("data", a);
 $.ajax({
 url:'',
 type:'post',
 data:formData,
 cache: false,
 processData: false,
 contentType: false,
 xhr: function(){
 var xhr = $.ajaxSettings.xhr();
 if(onprogress && xhr.upload) {
  xhr.upload.addEventListener("progress" , onprogress, false);
  return xhr;
 }
 } 
 })
};
function onprogress(evt){
 var loaded = evt.loaded;  //已经上传大小情况 
 var tot = evt.total;  //附件总大小 
 var per = Math.floor(100*loaded/tot); //已经上传的百分比 
 $(".progress-label").html( per  "%" );
 $(".son").css("width" , per  "%");
 if(per>=100){
 $(".parent-dlg").hide();
 }
 }

您可能感兴趣的小说:

  • JQuery Ajax动态加载Table数据的实例讲明
  • jQuery达成动态加载select下拉列表项功能示例
  • jquery引进外界CDN 加载失利则引入本地jq库
  • JS文件中加载jquery.js的实例代码
  • jQuery datatables插件完毕ajax加载数据与增加和删除改查功效示例
  • jquery 达成拖动文件上传加载进程条作用
  • jQuery完成滚动到底层时自动加载越多的主意身体力行
  • 秋菊转动的jquery加载动画效果

html代码:

 进度条css:

<div class="thead">
  <input placeholder="请输入搜索内容" id="searchTitle" type="text"/>
  <button id="search" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 搜索</button>
  <button id="add" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 新增</button>
  <button id="change" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 编辑</button>
  <button id="del" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 删除</button>
</div>
<table id="table" class="display" cellspacing="0" width="100%">
  <thead>
  <tr>
    <th>职业</th>
    <th>姓名</th>
    <th>性别</th>
    <th>爱好</th>
  </tr>
  </thead>
</table>
.parent-dlg{position: absolute;width:400px; height:20px; border:1px solid #aaaaaa;border-radius:3px;top:30%;left:50%;z-index:9999;margin-left:-200px;display:none;}
.parent-dlg .progress-label{position: absolute;left: 50%;top: 4px;font-weight: bold;text-shadow: 1px 1px 0 #fff;} 
.parent-dlg .son {width:0; height:100%; background-color:#cccccc; text-align:center; line-height:20px; font-size:16px; font-weight:bold;} 

js代码:

 此内容只是一个大要的文件上传手艺趋势,可依赖本身的品种进展改革! 

//点击查找
$("#search").click(function () {
    table.ajax.reload();
});
//初始化datatables
var table = $('#example').DataTable({
    "searching": false,
    "serverSide": true,
    "bProcessing": true,
    "bPaginate": true, //翻页功能
    "bLengthChange": true, //改变每页显示数据数量
    "bFilter": true, //过滤功能
    "bSort": false, //排序功能
    "sPaginationType": "full_numbers",
    "fnServerData": function (sSource, aoData, fnCallback) {
      var json = {
        "page": {
          "start": aoData[3].value,
          "length": aoData[4].value,
        },
        "search": {
          "xb": $("#searchTitle").val()
        }
      };
      $.ajax({
        "dataType": 'json',
        "type": "POST",
        "url": server   "user/queryUser.do",
        "contentType": "application/json; charset=utf-8",
        "data": JSON.stringify(json),
        "success": function (data) {
          data.recordsTotal = data.page.recordsTotal;
          data.recordsFiltered = data.page.recordsTotal;
          fnCallback(data);
        }
      });
    },
    "oLanguage": {
      "sLengthMenu": "每页显示 _MENU_ 条记录",
      "sZeroRecords": "抱歉, 没有找到",
      "sInfoEmpty": "没有数据",
      "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
      "oPaginate": {
        "sFirst": "首页",
        "sPrevious": "前一页",
        "sNext": "后一页",
        "sLast": "尾页"
      },
      "sZeroRecords": "没有检索到数据",
    },
    "aoColumns": [
      {"data": "zy"},
      {"data": "xm"},
      {"data": "xb"},
      {"data": "fov"}
    ]
});
///////////////////////////////////////////////////////////////////////////////
//增加
$("#add").click(function () {
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['420px', '240px'], //宽高
      btn: ['确定'],
      yes: function (index, layero) {
        var json = {
          "zy": $("#zhiy").val(),
          "xm": $("#name").val(),
          "xb": $("#sex").val(),
          "fov_ck": $("#aihao").val()
        };
        $.ajax({
          type: "POST",
          url: server   "user/addUser.do",
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(json),
          dataType: "json",
          success: function (data) {
            if (data.success == true) {
              layer.msg(data.msg);
            } else if (data.success == false) {
              layer.msg(data.msg);
            }
          }
        });
        layer.close(index);
        table.ajax.reload();
      },
      content: '职业:'   '<input type="text" name="" id="zhiy" value=""/>'   '<br>姓名:'
        '<input type="text" name="" id="name" value=""/>'   '<br>性别:'
        '<input type="text" name="" id="sex" value=""/>'   '<br>爱好:'
        '<input type="text" name="" id="aihao" value=""/>'
    });
});
//选中一行触发
$('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      adatid = "";
    }
    else {
      table.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
      adatid = table.row(this).data().guid;
      adata = table.row(this).data().zy;
      bdata = table.row(this).data().xm;
      cdata = table.row(this).data().xb;
      ddata = table.row(this).data().fov;
    }
});
////////////////////////////////////////////////////////////////////////////////////////
//修改
$("#change").click(function () {
    if (adatid === '') {
      alert("请选中要修改的数据");
    } else {
      layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['420px', '240px'], //宽高
        btn: ['确定'],
        yes: function (index, layero) {
          var json = {
            "guid": adatid,
            "zy": $("#cid").val(),
            "xm": $("#cname").val(),
            "xb": $("#csex").val(),
            "fov_ck": $("#cage").val()
          };
          $.ajax({
            type: "POST",
            url: server   "user/updateUser.do",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(json),
            dataType: "json",
            success: function (data) {
              if (data.success == true) {
                layer.msg(data.msg);
              } else if (data.success == false) {
                layer.msg(data.msg);
              }
            }
          });
          layer.close(index);
          table.ajax.reload();
        },
        content: '职业:'   '<input type="text" name="" id="cid"/>'   '<br>姓名:'
          '<input type="text" name="" id="cname"/>'   '<br>性别:'
          '<input type="text" name="" id="csex"/>'   '<br>爱好:'
          '<input type="text" name="" id="cage"/>'
      });
    }
    $("#cid").val(adata);
    $("#cname").val(bdata);
    $("#csex").val(cdata);
    $("#cage").val(ddata);
});
////////////////////////////////////////////////////////////////////////////////
//删除
$("#del").click(function () {
    if (adatid === '') {
      alert("请删除要修改的数据");
    } else {
      var json = {
        "guid": adatid
      };
      $.ajax({
        type: "POST",
        url: server   "user/deleteUser.do",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(json),
        dataType: "json",
        success: function (data) {
          if (data.success == true) {
            layer.msg(data.msg);
          } else if (data.success == false) {
            layer.msg(data.msg);
          }
        }
      });
      table.ajax.reload();
    }
});

总结

越来越多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery表格(table)操作技能汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技艺汇总》、《jQuery常用插件及用法总括》、《jQuery扩张能力计算》及《jquery选择器用法计算w88官方网站手机版,》

上述所述是作者给大家介绍的jquery 完毕拖动文件上传加载进程条作用,希望对大家具备扶助,若是大家有任何难题招待给自己留言,小编会及时复苏大家的!

仰望本文所述对我们jQuery程序设计具备扶助。

您恐怕感兴趣的小说:

  • jquery ajax加载数据前台渲染形式不用for遍历的格局
  • JQuery Ajax动态加载Table数据的实例讲授
  • jQuery达成动态加载select下拉列表项作用示例
  • jquery引进外界CDN 加载失利则引进本地jq库
  • JS文件中加载jquery.js的实例代码
  • jQuery datatables插件完成ajax加载数据与增加和删除改查功效示例
  • jQuery完毕滚动到底层时自动加载越多的点子言传身教
  • 黄花转动的jquery加载动画效果

您也许感兴趣的稿子:

  • jquery ajax加载数据前台渲染方式不用for遍历的方法
  • JQuery Ajax动态加载Table数据的实例解说
  • jQuery完成动态加载select下拉列表项功用示例
  • jquery引进外界CDN 加载失利则引进本地jq库
  • JS文件中加载jquery.js的实例代码
  • jquery 达成拖动文件上传加载进程条作用
  • jQuery完结滚动到底层时自动加载更加多的点子亲自过问
  • 金蕊转动的jquery加载动画效果

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:落实拖动文件上传加载进程条功效,不用for遍历

关键词: www.w88985.c

上一篇:Vue学习的第九天,入门基础
下一篇:没有了