bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.
<script> $("#update_csv").fileinput({ showUpload: false, language:'zh', uploadAsync:true, dropZoneEnabled:false, uploadUrl:'http://www.soyiyuan.com/', maxFileCount: 1, maxImageWidth: 600, resizeImage: false, showCaption: false, showPreview: false, browseClass: "btn btn-primary btn-lg", allowedFileExtensions : ['csv', 'txt'], previewFileIcon: "" }).on("filebatchselected", function(event, files) { $(this).fileinput("upload"); }) .on("fileuploaded", function(event, data) { if(data.response) { alert('处理成功'); } }); </script>
核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .
相关推荐
这里的参数可以根据需求调整,比如设置初始预览图片、上传URL、删除文件的回调函数等。通过`data`属性,我们可以将`preList`和`preConfigList`传入,使组件能够正确地展示已有的文件。 总的来说,实现Bootstrap中的...
8. **自定义事件和回调函数**:开发者可以通过监听和响应各种事件(如文件选择、上传开始、上传成功等),自定义上传过程中的行为。 9. **API接口**:提供了丰富的API接口,允许开发者进行更深入的定制,如设置上传...
- **错误回调**:提供错误回调函数,用于处理上传失败的情况。 5. **异步上传**: - **AJAX支持**:支持使用AJAX进行后台上传,无刷新页面即可完成操作。 - **跨域上传**:对于需要跨域上传的场景,插件也能妥善...
Bootstrap-fileinput 是一款高度可定制化的前端文件上传控件,基于流行的前端框架Bootstrap构建,提供了丰富的功能和良好的用户体验。这款控件特别适用于那些需要处理用户上传文件的Web应用,如图片上传、文档上传等...
此外,Bootstrap-fileinput还提供了丰富的事件和回调函数,如`fileloaded`、`filebatchselected`、`fileuploaded`等,方便开发者进行更复杂的功能定制和错误处理。 在实际应用中,我们可以结合后端服务(如PHP、...
在使用Bootstrap fileinput组件进行文件上传和管理时,我们可能会遇到需要在文件上传成功后同步删除服务器上旧文件的情况。本文将详细介绍如何配置Bootstrap fileinput以实现在上传新文件并移除文件预览时,触发...
10. **自定义事件和回调函数**:插件提供了一系列的自定义事件和回调函数,允许开发者在特定阶段插入自己的逻辑,如在文件选择后、上传成功或失败时执行特定操作。 11. **国际化支持**:为了满足全球用户的语言需求...
3. **自定义行为**:可以通过设置插件的配置选项来自定义组件的行为,比如自定义上传URL、上传前的预处理函数、上传后的回调函数等。 总结来说,Bootstrap-fileinput上传组件通过"fileinput-all.css"解决了样式冲突...
Bootstrap Fileinput是一个流行的jQuery插件,它扩展了Bootstrap框架的功能,为用户提供了一种优雅、功能丰富的文件输入控件。这个插件特别适用于处理文件上传,包括单个文件选择、多文件选择、预览、异步上传等。在...
Bootstrap-fileinput 是一个流行的、高度可定制的文件输入插件,它将传统的文件选择体验转变为一个功能丰富的上传组件。这个插件充分利用了Bootstrap框架的样式和功能,为网页中的文件上传提供美观且用户友好的界面...
在实际应用中,你可能还需要处理文件上传成功或失败的回调,以及在用户点击上传按钮时触发的事件。例如,你可以添加一个按钮来触发文件上传,并在上传完成后更新页面: ```javascript $("#addBtn").click(function ...
Bootstrap Fileinput是一个流行的前端文件输入插件,专为HTML5设计,用于增强和美化传统的文件上传功能。这个插件提供了一种美观、响应式的界面,同时保持了良好的用户体验。在"bootstrap-fileinput.rar"压缩包中,...
Bootstrap-fileinput支持多种配置选项,包括设置上传URL、自定义上传成功/失败回调、预览文件类型限制等,可以根据项目需求进行调整。此外,它还提供了一系列事件,如`filebatchselected`(文件选中)、`...
Bootstrap-fileinput是一款基于Bootstrap框架的高级文件输入插件,它为网页中的文件上传功能提供了美观且功能丰富的解决方案。这个插件极大地改善了传统HTML `<input type="file">` 元素的用户体验,使得多图片上传...
9. **插件扩展**:可以通过插件扩展功能,例如添加缩略图生成、上传成功后的回调处理等。 在`bootstrap-fileinput-master`压缩包中,通常包含以下文件和目录: 1. `dist`:包含了编译好的CSS、JS以及必要的图片...
在实际应用中,开发者可以通过JavaScript和jQuery API来控制插件的行为,例如设置上传URL、处理回调函数等。同时,配合后端服务,可以实现文件的存储、验证、权限控制等功能,确保上传的安全性和稳定性。 在...
例如,你可以改变按钮的文字、设置上传URL、定义文件上传成功或失败的回调函数等。 ### 结论 Bootstrap fileinput.js为开发者提供了一个强大且易于使用的文件上传工具,不仅提升了网页界面的美观度,还通过丰富的...
2. **功能丰富**:此插件提供了多种功能,如多文件选择、文件预览、进度条显示、拖放支持、文件类型限制、上传前的回调函数、错误处理等,大大增强了文件上传的用户体验。 3. **自定义样式**:Bootstrap Fileinput...
同时,可以监听`fileuploaded`事件来获取上传成功后的回调。 在201505091706这个压缩包文件中,可能包含了实现这些功能的HTML、CSS、JavaScript代码示例,以及可能的服务器端处理文件上传的脚本。你可以解压并参考...
2. **上传成功和失败处理**:`success`和`error`回调函数可以用来处理文件上传后的响应,例如显示成功消息或错误提示。 3. **自定义模板**:你可以根据需要自定义文件列表的显示模板,以适应不同场景的需求。 4. *...