关于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‘));
        });

原文地址:https://www.cnblogs.com/duduyx/p/9753019.html

时间: 2024-08-25 08:48:40

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

bootstrap fileinput上传文件

参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974  https://www.cnblogs.com/parker-yu/p/7207071.html 最近在最接口对接,需要将文件和一些其他参数发送到其他系统中去,发送文件用到了bootstrap fileinput. 一.首先要下载插件包 插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 二.引入js和

Bootstrap FileInput 上传 中文 API 整理

Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问大佬 总结一下 1 一. 引入文件 2 <link href="../css/bootstrap.min.css"rel="stylesheet"> 3 <link href="../css/fileinput.css" media

bootstrap fileinput 上传文件

最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput 真是好看: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fi

github 上传新文件至新repository [linux]

1. 在网页上新建repository2. git clone http://github.com/FannieHF/requireJS3. cd requireJS //进入到这个directory4. git add .5. git commit -m "Add existing file"6. git config --global user.email "[email protected]"7. git config --global user.name F

bootstrap fileinput上传返回400,404,500 等错误替换

$(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-error-message").text("请按照正确的进行操作!谢谢!"); }); 根据你的ID替换即可.

ZendFramework2学习笔记 文件上传、文件上传进度

修改php.ini以适应文件的要求: //php.ini file_uploads = On post_max_size = 600M upload_max_filesize = 600M session.upload_progress.enabled = On session.upload_progress.freq = "1%" session.upload_progress.min_freq = "1" 以上我们限制了文件大小限制在不超过600MB. 关于文件

上传大文件的解决方案

需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js文件中, 在bjui-all.js文件中的全局变量定义中有以下

.NET两种常见上传下载文件方法

1.FTP模式 代码如下: (1)浏览 /// <summary> /// 浏览文件 /// </summary> /// <param name="tbControl">控件名称</param> private void ViewFile(TextBox tbControl) { OpenFileDialog openFileDialogTemp = new OpenFileDialog();//提示用户打开文件弹窗 //设置文件类型

[ 墨者学院 ] 文件上传 —— 内部文件上传系统漏洞分析

题目简介: 背景介绍 在为某公司检测后台页面时,你发现了一个上传页面,该页面做了一些防护,你需要尝试绕过并上传webshell,以获得网站根目录访问权限 实训目标 1.熟悉常见中间件存在的解析漏洞:2.熟悉一句话木马的使用与制作3.熟悉常见的上传漏洞利用方法 解题方向 1.试探允许上传的文件类型2.观察服务器在处理完上传任务后返回的内容,获取上传路径3.尝试修改上传路径,观察服务器是否允许写入权限 解题过程: 1.打开靶机环境 2.通过上传界面的源代码,可以看出此站点环境是asp. 3.这里上传