Bootstrap fileinput文件上传预览插件使用详解


Posted in Javascript onMay 16, 2017

介绍

通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便。

Bootstrap fileinput文件上传预览插件使用详解

BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件、在线预览、拖拽上传等功能,封装后BaseFile主要包括以下功能:

  • 弹出窗口的附件上传
  • 当前界面的附件上传
  • 显示附件明细
  • 可编辑的附件明细(删除、预览、不可新增)

关于Bootstrap-fileinput的API文档可参考http://plugins.krajee.com/file-input

本文源码已在AdminEAP框架(一个基于AdminLTE的Java开发平台)中开源,可在Github下载相关代码:

Github:https://github.com/bill1012/AdminEAP

AdminEAP官网:http://www.admineap.com

使用说明

1、初始化

如果需要在当前界面使用附件上传功能(非弹窗方式)则需要在头部引入相关的css和js文件

css文件

<link rel="stylesheet" href="./resources/common/libs/fileinput/css/fileinput.min.css" >

js文件

<script src="./resources/common/libs/fileinput/js/fileinput.js"></script>
<script src="./resources/common/libs/fileinput/js/locales/zh.js"></script>
<!--BaseFile组件-->
<script src="./resources/common/js/base-file.js"></script>

form表单上还需要配置enctype="multipart/form-data"属性

2、弹窗方式调用

BaseFile支持弹窗方式打开一个附件上传窗口,点击附件上传后,弹出窗口,上传附件关闭窗口后,上传的附件在type=file的控件回填。

在表单中点击弹窗上传附件:

Bootstrap fileinput文件上传预览插件使用详解

Bootstrap fileinput文件上传预览插件使用详解

上传完毕,关闭窗口,附件回填

Bootstrap fileinput文件上传预览插件使用详解

再次打开上传附件上传窗口时,会把已有的附件回填到附件上传窗口。

配置如下:

html代码

<input type="hidden" name="fileIds" id="fileIds">
   <div class="form-group">
    <div class="btn btn-default btn-file" id="uploadFile">
     <i class="fa fa-paperclip"></i> 上传附件(Max. 10MB)
    </div>
   </div>
   <div class="form-group" id="file_container">
    <input type="file" name="file" id="attachment">
   </div>

js代码

$("#uploadFile").file({
   title: "请上传附件",
   fileinput: {
    maxFileSize: 10240,
    maxFileCount:3
   },
   fileIdContainer:"[name='fileIds']",
   showContainer:'#attachment',
   //显示文件类型 edit=可编辑 detail=明细 默认为明细
   showType:'edit',
   //弹出窗口 执行上传附件后的回调函数(window:false不调用此方法)
   window:true,
   callback:function(fileIds,oldfileIds){
    //更新fileIds
    this.showFiles({
     fileIds:fileIds
    });
   }
  });

3、本地界面调用

本地界面调用附件上传,如下图所示:

将上传附件嵌入到当前界面方式

Bootstrap fileinput文件上传预览插件使用详解

上传后的附件可删除、可预览

Bootstrap fileinput文件上传预览插件使用详解

Bootstrap fileinput文件上传预览插件使用详解

(目前图片文件可预览,其他文件不可预览,后期将集成txt/xml/html/pdf的预览功能)

配置如下:

html代码

<div class="form-group" id="file_container">
  <input type="file" name="file" id="attachment">
</div>

js代码

$("#attachment").file({
   fileinput: {
    maxFileSize: 10240,
    maxFileCount:3
   },
   fileIdContainer:"[name='fileIds']",
   window:false
  });

4、控件参数说明

window 默认为true,弹窗方式打开

title window=true时配置,弹窗的标题,默认为“文件上传”

width window=true时配置,弹窗的宽度,默认900

winId window=true时配置,弹出的id,默认为fileWin

fileinput Bootstrap-fileinput的配置参数,会覆盖默认配置,比如允许上传哪种类型的附件allowedFileTypes,允许上传最大附件大小maxFileSize,允许上传附件的个数maxFileCount等,具体的配置参数可以查询Bootstrap-fileinput的API文档。

fileIdContainer 必须,上传后的附件id存储的位置,id以逗号分隔

showContainer window=true必须配置,文件上传后回填的区域,window=false时如不配置,则取base-file的初始对象

showType window=true配置,值为edit或者detail,edit表示回填后可对数据进行删除、预览,detail只能显示,不能删除

callback window=true配置,关闭附件上传的窗口后执行的回调函数(比如更新当前的文件列表),fileIds,oldfileIds两个参数分别是更新后文件ids和更新前的文件ids

BaseFile默认配置,BaseFile的更多实现,请查看BaseFile源码

BaseFile.prototype.default = {
  winId: "fileWin",
  width: 900,
  title: "文件上传",
  //通用文件上传界面
  url: basePath + "/file/uploader",
  //默认支持多文件上传
  multiple: true,
  //默认弹出附件上传窗口
  window:true,
  showType:"detail",
  fileinput: {
   language: 'zh',
   uploadUrl: basePath + "/file/uploadMultipleFile",
   deleteUrl:basePath+"/file/delete",
   uploadAsync:false,
   validateInitialCount:true,
   overwriteInitial: false,
   allowedPreviewTypes: ['image'],
   previewFileIcon:'<i class="fa fa-file-o"></i>',
   previewFileIconSettings: null,
   slugCallback: function (text) {
    var newtext=(!text||text=='') ? '' : String(text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g, '_');
    //去除空格
    return newtext.replace(/(^\s+)|(\s+$)/g,"").replace(/\s/g,"");
   }
  }
 }

5、BaseFile控件源码

/**
 * 通用文件管理组件
 * @author billjiang qq:475572229
 */
(function ($, window, document, undefined) {
 'use strict';

 var pluginName = 'file';

 $.fn[pluginName] = function (options) {
  var self = $(this);
  if (this == null)
   return null;
  var data = this.data(pluginName);
  if (!data) {
   data = new BaseFile(this, $.extend(true, {}, options));
   self.data(pluginName, data);
  }
 };


 var BaseFile = function (element, options) {
  this.element = element;
  //extend优先级 后面的会覆盖前面的
  //alert(this.element.selector);
  //将容器ID传过去便于弹窗获取到BaseFile对象,如果页面布局不在使用jquery.load方法,则该方法会失效,因为不是一个页面了
  options.container = options.container || this.element.selector.replace("#", "");
  //初始化文件图标信息
  this.getFileIconSettings();
  this.options = $.extend(true, {}, this.default, options);
  //初始化图标信息
  this.initFileIds();

  if(this.options.window) {
   this.element.click(function () {
    $(this).data('file').openWin();
   });
  }else{
   //非弹窗形式
   if(this.options.multiple)
    this.element.attr("multiple","multiple");
  }

  //如果配置了附件编辑容器showContainer(附件列表,可单个删除),则进行初始化
  if(this.hasDisplayZone()){
   this.showFiles();
  }


 }

 BaseFile.prototype.default = {
  winId: "fileWin",
  width: 900,
  title: "文件上传",
  //通用文件上传界面
  url: basePath + "/file/uploader",
  //默认支持多文件上传
  multiple: true,
  //默认弹出附件上传窗口
  window:true,
  showType:"detail",
  fileinput: {
   language: 'zh',
   uploadUrl: basePath + "/file/uploadMultipleFile",
   deleteUrl:basePath+"/file/delete",
   uploadAsync:false,
   validateInitialCount:true,
   overwriteInitial: false,
   allowedPreviewTypes: ['image'],
   previewFileIcon:'<i class="fa fa-file-o"></i>',
   previewFileIconSettings: null,
   slugCallback: function (text) {
    var newtext=(!text||text=='') ? '' : String(text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g, '_');
    //去除空格
    return newtext.replace(/(^\s+)|(\s+$)/g,"").replace(/\s/g,"");
   }
  }
 }

 BaseFile.prototype.getFileInputConfig=function () {
  return this.options.fileinput;
 }
 BaseFile.prototype.getFileIconSettings = function () {
  var self = this;
  ajaxPost(basePath + "/file/icons", null, function (icons) {
   self.previewFileIconSettings = icons;
   //console.log(self.previewFileIconSettings);
  })
 }


 BaseFile.prototype.openWin = function () {
  var that = this;
  var self = $.extend(true, {}, this.options);
  //深拷贝后删除属性,这样不会通过后台传送过去,防止被XSS过滤掉特殊字符
  //不需要通过参数config=传递到弹窗的参数可使用delete删除
  delete self.callback;
  delete self.fileIds;
  delete self.showContainer;
  delete self.fileIdContainer;
  delete self.fileinput;

  /*console.log(this.options);
   console.log("=============");
   console.log(self);*/
  modals.openWin({
   winId: that.options.winId,
   url: that.options.url + "?config=" + JSON.stringify(self),
   width: that.options.width + "px",
   title: that.options.title,
   backdrop: "static"
  });
 }

 BaseFile.prototype.callbackHandler = function (fileIds) {
  //更新fileIds并执行回调函数
  var oldfileIds = this.options.fileIds;
  this.options.fileIds = fileIds;
  this.updateFileIds();
  if (this.options.callback) {
   this.options.callback.call(this, fileIds, oldfileIds);
  }
 }

 //调用成功后执行显示附件
 BaseFile.prototype.showFiles=function(options){
  options=options||{};
  if(!this.hasDisplayZone()){
   modals.error("请配置showContainer属性,并在容器下配置type=file的input组件");
   return;
  }
  var fileIds=options.fileIds||this.options.fileIds;
  if(!fileIds&&this.options.window){
   $(this.options.showContainer).hide();
   return;
  }
  //显示
  $(this.options.showContainer).show();
  var fileComponet=$(this.options.showContainer);
  var fileResult=this.getFileResult(fileIds),preview=fileResult.initialPreview,previewConfig=fileResult.initialPreviewConfig,self=this;
  //配置三类参数 edit=附件列表(可删除) detail=附件列表(显示) 可上传
  var defaultConfig={
   initialPreview:preview,
   initialPreviewConfig:previewConfig
  };
  var config;
  if(this.options.window){
   if(this.options.showType=="edit"){
    //全局配置->本方法默认配置->edit属性下配置->外部参数
    config=$.extend({},self.options.fileinput,defaultConfig,{
     showRemove:false,
     showUpload:false,
     showClose:false,
     showBrowse:false,
     showCaption:false
    },options);
   }else if(this.options.showType=="detail"){
    config=$.extend({},self.options.fileinput,defaultConfig,{
     showRemove:false,
     showUpload:false,
     showClose:false,
     showBrowse:false,
     showCaption:false,
     initialPreviewShowDelete:false
    },options);
   }
  }else{
   config=$.extend({},self.options.fileinput,defaultConfig,{
    showClose:false
   },options);
  }

  if(!config){
   modals.error("未找到showFiles中的相关配置");
   return;
  }
  //console.log("config=========="+JSON.stringify(config));
  fileComponet.fileinput('destroy');
  fileComponet.fileinput(config).on("filedeleted",function (event,key) {
   var newfids=self.deleteFileIds(key,self.options.fileIds);
   self.options.fileIds=newfids;
   self.updateFileIds();
  }).on("fileuploaded",function(event,data,previewId,index){
   var newfids=self.addFileIds(data.response.fileIds,self.options.fileIds);
   self.options.fileIds=newfids;
   self.updateFileIds();
  }).on("filebatchuploadsuccess",function (event,data,previewId,index) {
   var newfids=self.addFileIds(data.response.fileIds,self.options.fileIds);
   self.options.fileIds=newfids;
   self.updateFileIds();
  }).on("filezoomhidden", function(event, params) {
   $(document.body).removeClass('modal-open');
   $(document.body).css("padding-right","0px");
  });
 }

 /**
  * 向targetIds里删除数据fileIds
  * @param fileIds
  * @param targetIds
  */
 BaseFile.prototype.deleteFileIds=function(fileIds,targetIds){
  if(!fileIds) return targetIds;
  //没有文件删除,其中必有蹊跷
  if(!targetIds){
   modals.error("没有要删除的文件,请检查是否数据没有初始化");
   return;
  }
  var fileIdArr=fileIds.split(",");
  var fresult=targetIds.split(",");
  $.each(fileIdArr,function (index,fileId){
   //存在则删除
   if($.inArray(fileId,fresult)>-1){
    fresult.splice($.inArray(fileId,fresult),1);
   }
  })
  return fresult.join();
 }

 /**
  * 向targetIds里加数据fileIds
  * @param fileIds
  * @param targetIds
  */
 BaseFile.prototype.addFileIds=function (fileIds,targetIds) {
  if(!fileIds)return targetIds;
  var fileIdArr=fileIds.split(",");
  var fresult=[];
  if(targetIds){
   fresult=targetIds.split(",");
  }
  $.each(fileIdArr,function (index,fileId){
   //不存在,新增
   if($.inArray(fileId,fresult)==-1){
    fresult.push(fileId);
   }
  })
  return fresult.join();
 }

 BaseFile.prototype.updateFileIds=function(){
  if(this.options.fileIdContainer)
   $(this.options.fileIdContainer).val(this.options.fileIds);
 }

 BaseFile.prototype.initFileIds=function(){
  //不弹出窗口的话一定要绑定fileIdContainer
  if(!this.options.window){
   if(!this.options.fileIdContainer||!$(this.options.fileIdContainer)){
    modals.info("请设置fileIdContainer属性");
    return;
   }
  }
  if(!this.options.fileIds){
   if(this.options.fileIdContainer){
    this.options.fileIds=$(this.options.fileIdContainer).val();
   }
  }
 }

 BaseFile.prototype.getFileResult=function(fileIds){
  var ret=null;
  ajaxPost(basePath+"/file/getFiles",{fileIds:fileIds},function(result){
   ret=result;
  });
  return ret;
 };

 /**
  * 是否有显示区域
  * @returns {boolean}
  */
 BaseFile.prototype.hasDisplayZone=function(){
  if(!this.options.showContainer){
   this.options.showContainer=this.element.selector;
  }
  if(!this.options.showContainer||!$(this.options.showContainer)){
   return false;
  }
  return true;
 }


})(jQuery, window, document);

6、后端源码

@Controller
@RequestMapping("/file")
public class UploaderController {

 private static Logger logger= LoggerFactory.getLogger(UploaderController.class);

 //previewFileIconSettings
 public static Map fileIconMap=new HashMap();
 @Resource
 private UploaderService uploaderService;

 static {
  fileIconMap.put("doc" ,"<i class='fa fa-file-word-o text-primary'></i>");
  fileIconMap.put("docx","<i class='fa fa-file-word-o text-primary'></i>");
  fileIconMap.put("xls" ,"<i class='fa fa-file-excel-o text-success'></i>");
  fileIconMap.put("xlsx","<i class='fa fa-file-excel-o text-success'></i>");
  fileIconMap.put("ppt" ,"<i class='fa fa-file-powerpoint-o text-danger'></i>");
  fileIconMap.put("pptx","<i class='fa fa-file-powerpoint-o text-danger'></i>");
  fileIconMap.put("jpg" ,"<i class='fa fa-file-photo-o text-warning'></i>");
  fileIconMap.put("pdf" ,"<i class='fa fa-file-pdf-o text-danger'></i>");
  fileIconMap.put("zip" ,"<i class='fa fa-file-archive-o text-muted'></i>");
  fileIconMap.put("rar" ,"<i class='fa fa-file-archive-o text-muted'></i>");
  fileIconMap.put("default" ,"<i class='fa fa-file-o'></i>");
 }

 //从setting.properties文件中注入文件相对目录(相对目录为显示文件)
 //@Value("${uploaderPath}") 只有配置@Config才能注入
 private static final String uploaderPath=PropertiesUtil.getValue("uploaderPath");


 /**
  * 跳转到通用文件上传窗口
  * @return
  */
 @RequestMapping(value="/uploader",method = RequestMethod.GET)
 public String uploader(String config,HttpServletRequest request){
  request.setAttribute("config",config);
  return "base/file/file_uploader";
 }


 /**
  * 通用文件上传接口,存储到固定地址,以后存储到文件服务器地址
  */
 @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
 @ResponseBody
 public SysFile uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,
        HttpServletRequest request, HttpServletResponse response) {
  //TODO dosomething
  return new SysFile();
 }

 /**
  * 多文件上传,用于uploadAsync=false(同步多文件上传使用)
  * @param files
  * @param request
  * @param response
  * @return
  */
 @RequestMapping(value = "/uploadMultipleFile", method = RequestMethod.POST)
 @ResponseBody
 public FileResult uploadMultipleFile(@RequestParam(value = "file", required = false) MultipartFile[] files,
           HttpServletRequest request, HttpServletResponse response) throws IOException {
  System.out.println("the num of file:"+files.length);

  FileResult msg = new FileResult();

  ArrayList<Integer> arr = new ArrayList<>();
  //缓存当前的文件
  List<SysFile> fileList=new ArrayList<>();
  String dirPath = request.getRealPath("/");
  for (int i = 0; i < files.length; i++) {
   MultipartFile file = files[i];

   if (!file.isEmpty()) {
    InputStream in = null;
    OutputStream out = null;
    try {
     File dir = new File(dirPath+uploaderPath);
     if (!dir.exists())
      dir.mkdirs();
     //这样也可以上传同名文件了
     String filePrefixFormat="yyyyMMddHHmmssS";
     System.out.println(DateUtil.format(new Date(),filePrefixFormat));
     String savedName=DateUtil.format(new Date(),filePrefixFormat)+"_"+file.getOriginalFilename();
     String filePath=dir.getAbsolutePath() + File.separator + savedName;
     File serverFile = new File(filePath);
     //将文件写入到服务器
     //FileUtil.copyInputStreamToFile(file.getInputStream(),serverFile);
     file.transferTo(serverFile);
     SysFile sysFile=new SysFile();
     sysFile.setFileName(file.getOriginalFilename());
     sysFile.setSavedName(savedName);
     sysFile.setCreateDateTime(new Date());
     sysFile.setUpdateDateTime(new Date());
     sysFile.setCreateUserId(SecurityUtil.getUserId());
     sysFile.setDeleted(0);
     sysFile.setFileSize(file.getSize());
     sysFile.setFilePath(uploaderPath+File.separator+savedName);
     uploaderService.save(sysFile);
     fileList.add(sysFile);
     /*preview.add("<div class=\"file-preview-other\">\n" +
       "<span class=\"file-other-icon\"><i class=\"fa fa-file-o text-default\"></i></span>\n" +
       "</div>");*/

     logger.info("Server File Location=" + serverFile.getAbsolutePath());
    } catch (Exception e) {
     logger.error( file.getOriginalFilename()+"上传发生异常,异常原因:"+e.getMessage());
     arr.add(i);
    } finally {
     if (out != null) {
      out.close();
     }
     if (in != null) {
      in.close();
     }
    }
   } else {
    arr.add(i);
   }
  }

  if(arr.size() > 0) {
   msg.setError("文件上传失败!");
   msg.setErrorkeys(arr);
  }
  FileResult preview=getPreivewSettings(fileList,request);
  msg.setInitialPreview(preview.getInitialPreview());
  msg.setInitialPreviewConfig(preview.getInitialPreviewConfig());
  msg.setFileIds(preview.getFileIds());
  return msg;
 }

 //删除某一项文件
 @RequestMapping(value="/delete",method = RequestMethod.POST)
 @ResponseBody
 public Result delete(String id,HttpServletRequest request){
  SysFile sysFile=uploaderService.get(SysFile.class,id);
  String dirPath=request.getRealPath("/");
  FileUtil.delFile(dirPath+uploaderPath+File.separator+sysFile.getSavedName());
  uploaderService.delete(sysFile);
  return new Result();
 }

 /**
  * 获取字体图标map,base-file控件使用
  */
 @RequestMapping(value="/icons",method = RequestMethod.POST)
 @ResponseBody
 public Map getIcons(){
  return fileIconMap;
 }

 /**
  * 根据文件名获取icon
  * @param fileName 文件
  * @return
  */
 public String getFileIcon(String fileName){
  String ext= StrUtil.getExtName(fileName);
  return fileIconMap.get(ext)==null?fileIconMap.get("default").toString():fileIconMap.get(ext).toString();
 }

 /**
  * 根据附件IDS 获取文件
  * @param fileIds
  * @param request
  * @return
  */
 @RequestMapping(value="/getFiles",method = RequestMethod.POST)
 @ResponseBody
 public FileResult getFiles(String fileIds,HttpServletRequest request){
  String[] fileIdArr=fileIds.split(",");
  DetachedCriteria criteria=DetachedCriteria.forClass(SysFile.class);
  criteria.add(Restrictions.in("id",fileIdArr));
  criteria.addOrder(Order.asc("createDateTime"));
  List<SysFile> fileList=uploaderService.findByCriteria(criteria);
  return getPreivewSettings(fileList,request);
 }


 /**
  * 回填已有文件的缩略图
  * @param fileList 文件列表
  * @param request
  * @return initialPreiview initialPreviewConfig fileIds
  */
 public FileResult getPreivewSettings(List<SysFile> fileList,HttpServletRequest request){
  FileResult fileResult=new FileResult();
  List<String> previews=new ArrayList<>();
  List<FileResult.PreviewConfig> previewConfigs=new ArrayList<>();
  //缓存当前的文件
  String dirPath = request.getRealPath("/");
  String[] fileArr=new String[fileList.size()];
  int index=0;
  for (SysFile sysFile : fileList) {
   //上传后预览 TODO 该预览样式暂时不支持theme:explorer的样式,后续可以再次扩展
   //如果其他文件可预览txt、xml、html、pdf等 可在此配置
   if(FileUtil.isImage(dirPath+uploaderPath+File.separator+sysFile.getSavedName())) {
    previews.add("<img src='." + sysFile.getFilePath().replace(File.separator, "/") + "' class='file-preview-image kv-preview-data' " +
      "style='width:auto;height:160px' alt='" + sysFile.getFileName() + " title='" + sysFile.getFileName() + "''>");
   }else{
    previews.add("<div class='kv-preview-data file-preview-other-frame'><div class='file-preview-other'>" +
      "<span class='file-other-icon'>"+getFileIcon(sysFile.getFileName())+"</span></div></div>");
   }
   //上传后预览配置
   FileResult.PreviewConfig previewConfig=new FileResult.PreviewConfig();
   previewConfig.setWidth("120px");
   previewConfig.setCaption(sysFile.getFileName());
   previewConfig.setKey(sysFile.getId());
   // previewConfig.setUrl(request.getContextPath()+"/file/delete");
   previewConfig.setExtra(new FileResult.PreviewConfig.Extra(sysFile.getId()));
   previewConfig.setSize(sysFile.getFileSize());
   previewConfigs.add(previewConfig);
   fileArr[index++]=sysFile.getId();
  }
  fileResult.setInitialPreview(previews);
  fileResult.setInitialPreviewConfig(previewConfigs);
  fileResult.setFileIds(StrUtil.join(fileArr));
  return fileResult;
 }
}

总结

本文源码已在AdminEAP框架(一个基于AdminLTE的Java开发平台)中开源,可在Github下载相关代码:

Github:https://github.com/bill1012/AdminEAP

AdminEAP官网:http://www.admineap.com

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木

Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
bootstrap响应式表格实例详解
May 15 #Javascript
VUE多层路由嵌套实现代码
May 15 #Javascript
You might like
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
Vue组件化开发思考
2018/02/02 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
创联软件面试题笔试题
2012/10/07 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
2014年大学生自我评价
2014/01/19 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android