Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置

在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。

在配置中遇到的一些问题，记录一下。

fileinput在文件上传成功后会触发'fileuploaded'事件，移除图片后会触发'filesuccessremove'事件。

其中在fileuploaded中参数previewId是形如：preview-1538964832345-2这样的一串字符，而在filesuccessremove里previewId是以uploaded开头并且数字也和fileuploaded中的不一样，像这样的：uploaded-1538964834797_18，但其实两者都是指向同一个div的id。

所以上传成功后我们只要在fileuploaded将服务器返回的数据key或者ID放入该div中，移除时在从中取出就可以了。

代码如下：

//files为fileinput控件ID，
$('#files').on('fileuploaded', function (e, data, previewId, index) {
　　　　　　//在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
　　　　　　$('#' + previewId).attr('fileid', data.response.fileid);
  }).on('filesuccessremove', function (event, previewId, extra) {
　　　　　　//在移除事件里取出所需数据，并执行相应的删除指令
   delete(($('#' + previewId).attr('fileid'));
  });

总结

以上所述是小编给大家介绍的Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap fileinput.js文件上传组件实例代码

    BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="

  • BootStrap Fileinput的使用教程

    bootstrap-fileinput是基于bootstrap的上传控件,此控件网上有很多例子.我照着例子做后发现请求无法提交到后台,反复测试后发现,不能禁止预览(showPreview要设置为true),禁止预览后fileuploaded则无法响应(实际情况是showPreview=false时, 即便是uploadAsync=true, 也是filebatchuploadsuccess响应返回结果.如果showPreview=true, uploadAsync=true, 才是fileupl

  • .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图 如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2前台页面编写

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

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

    介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

  • 关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

    数据库中为datetime类型,.net读取数据已Json格式发回给前台页面:例如:使用bootstrap表格插件Ⅹ formatter: function (value, row, index) { var date = new Date(parseInt(value.slice(6))); return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + date.getDate() + " " + da

  • Bootstrap fileinput组件封装及使用详解

    Bootstrap fileinput组件封装及使用详解

    介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

  • Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置

    Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置

    在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器上的文件和记录.但新上传的文件则需要其他方式来同步删除服务器记录. 在配置中遇到的一些问题,记录一下. fileinput在文件上传成功后会触发'fileuploaded'事件,移除图片后会触发'filesuccessremove'事件. 其中在fileuploaded中参数previewId是形如

  • BootStrap Fileinput上传插件使用实例代码

    BootStrap Fileinput上传插件使用实例代码

    0.效果图 1.引入js.css(建议css放在html头部,js加载在html底部) <link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/scripts/jquery-1.10.2.min.js"></script> <script sr

  • bootstrap fileinput 上传插件的基础使用

    bootstrap fileinput 上传插件的基础使用

    前言: 之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput.关于这个组件的简单应用,基于BootStrap Me

  • 详解Vue ElementUI手动上传excel文件到服务器

    详解Vue ElementUI手动上传excel文件到服务器

    概述 具体需求场景如下: 选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来.官网也有手动上传的示例,通过 action="url" 传入地址的方式,但在实际项目中请求需要自己配置,下面具体说明实现的方法. 说明: 在上传文件到展示统计结果,我们后端给了两个接口:首先调用文件上传接口,上传成功后,根据后端返回的mark再调用统计结果接口. 属性设置 .vue文件 <el-row> <div class="e

  • Bootstrap Fileinput 4.4.7文件上传实例详解

    本实例所做功能为发送带附件邮件,可以上传多个附件,操作为选择一个附件以后自动上传,然后继续选择附件,填写完表单其他信息,点击保存发送带附件邮件. HTML标签 <input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/> js初始化,设置全局文件名参数 var fileName = []; function in

  • PHP move_uploaded_file() 函数(将上传的文件移动到新位置)

    定义和用法 move_uploaded_file() 函数将上传的文件移动到新位置. 若成功,则返回 true,否则返回 false. 语法 move_uploaded_file(file,newloc) 参数 描述 file 必需.规定要移动的文件. newloc 必需.规定文件的新位置. 说明 本函数检查并确保由 file 指定的文件是合法的上传文件(即通过 PHP 的 HTTP POST 上传机制所上传的).如果文件合法,则将其移动为由 newloc 指定的文件. 如果 file 不是合法

  • xshell上传下载文件（Windows、Linux)

    xshell上传下载文件（Windows、Linux)

    经常有这样的需求,我们在Windows下载的软件包,如何上传到远程Linux主机上?还有如何从Linux主机下载软件包到Windows下:之前我的做法现在看来好笨好繁琐,不过也达到了目的,笨人有本方法嘛: 我是怎么操作的: 1.打开一台本地Linux虚拟机,使用mount 挂载Windows的共享文件夹到Linux上,然后拷贝数据到Linux虚拟机里面:(经常第一步都不顺利,无法挂载Windows的文件夹) 2.在本地Linux虚拟机使用rsync同步拷贝的数据到远程Linux主机上,需要双方都

  • ASP.NET解决上传大文件问题的方法

    上传文件的控件为:FileUpload Asp.Net对上传文件大小有限制.默认情况下用户只能上传4MB大小的文件,这会给用户带来不便.所以如果要上传40MB大小的文件.只能修改配置文件 关键代码如下 复制代码 代码如下: protected void btnSend_Click(object sender, EventArgs e) { try { //上传文件的思路: //获取上传文件的名称,此时为一个全路径的地址 string upFileName = fulFileName.FileNa

随机推荐