bootstrap-fileinput support cors-Domain
扩展 支持 跨域 上传 文件
代码地址: https://github.com/zaqzaq/bootstrap-fileinput
需要 引入的 文件
<link href="css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/bootstrap3.css" media="all" rel="stylesheet" type="text/css" /> //针对bootstrap 2+ 版本
<script src="js/fileinput.js" type="text/javascript"></script>
<script src="js/locales/zh.js" type="text/javascript"></script>
<script src="js/jquery.iframe-transport.js" type="text/javascript"></script>
html UI节点
<input id="filePicker" type="file" class="file-loading" title="选择图片">
JS DEMO 上传文件
$("input[type='file']").fileinput({
language : 'zh',
uploadUrl: uploadUrl,
initialPreview: initialPreviewArray,
initialPreviewAsData: true,
initialPreviewFileType: 'image',
overwriteInitial: true,
ajaxSettings:{
extraData:{
redirect:location.origin+"/fileinput/cors/result.html"
}
},
allowedFileExtensions : ['jpg', 'png','gif','jpeg','bmp'],
allowedFileTypes: ['image'],
showUpload: false,
slugCallback: function(filename) {//选择后未上传前 回调方法
return filename.replace('(', '_').replace(']', '_');
}
}).on("fileuploaded", function(event, data){//上传成功事件
console.log("上传成功")
console.log(data.response)
});
上传服务器后台 关键代码
String retVal=Urlencode.encode(returnJson);
response.sendRedirect(redirect+"?\"retVal\"")
注:redirect 为前台的入参回调url ,returnJson 上传后返回的消息
贴上 修改 动态修改 fileinput 配置属性 的demo代码
$("input[type='file']").data('fileinput').options.uploadUrl=“xxx.xx” //将上传的路径修改成xxx.xx
相关推荐
1. **多样式支持**:Bootstrap-fileinput 提供了多种预设的上传按钮样式,用户可以根据自己的需求选择合适的样式,也可以通过CSS自定义样式,以匹配网站的整体设计风格。 2. **实时预览**:对于支持的文件类型(如...
2. **引入插件**:接着,引入`bootstrap-fileinput.css`和`bootstrap-fileinput.js`,确保它们在Bootstrap和jQuery之后引入。 3. **初始化插件**:在JavaScript中,找到需要转换为文件输入组件的元素,然后调用`...
这是bootstrap的一个上传控件fileinput,网上下载的一些代码不全,会导致图标、功能出现异常。于是自己就到官网的github下载了一套代码,...另附上官方GitHub网址:https://github.com/kartik-v/bootstrap-fileinput
Bootstrap-fileinput 支持文件的移除操作,用户可以选择性地删除不再需要的文件,保持界面整洁。 5. **模块化操作**: 这个控件设计为模块化,这意味着其各个部分可以独立使用和定制。开发者可以根据需求选择启用...
Bootstrap-fileinput 提供了一系列的事件,如`fileloaded`(文件加载后触发)、`fileselect`(文件选择后触发)和`fileerror`(文件错误时触发),这些事件可以用来扩展和控制组件的行为。 6. **插件方法** API ...
这个`bootstrap-fileinput-master.zip`压缩包包含了该组件的完整源码,用于帮助开发者在项目中集成和自定义这个上传组件。 在详细讲解这个组件之前,我们先了解一些基本概念。Bootstrap是Twitter推出的一个开源的...
bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:...
这个"最新bootstrap-fileinput-master"应该是该插件的最新版本源代码,允许开发者自定义并集成到他们的Web应用中。 Bootstrap是世界上最受欢迎的前端开发框架之一,它提供了一套响应式设计、移动设备优先的WEB开发...
1. **多文件选择**:Bootstrap-fileinput支持多文件选择,用户可以一次性选取多个文件进行上传,提高了操作效率。 2. **预览功能**:对于常见的图片和多媒体文件,插件提供了实时预览功能,用户在上传前就能看到...
"上传插件(中文版)bootstrap-fileinput-master"是一个基于Bootstrap框架的文件输入增强插件,主要用于提升网页上的文件上传体验。这个插件为用户提供了一种美观、易用且功能丰富的交互方式,使得文件选择、预览、...
bootstrap-fileinput是一款非常优秀的HTML5文件上传插件,支持文件预览、多选等一系列特性。一款非常优秀的HTML5文件上传插件,支持bootstrap 3.x 和4.x版本,具有非常多的特性:多文件选择。这个插件能最简单的帮你...
在实际开发中,你需要根据自己的需求将"bootstrap-fileinput-master"中的相关文件引入到项目中,配置相应的参数,然后通过JavaScript调用其API来实现文件上传功能。同时,确保后端服务器端口已经准备好接收并处理...
在压缩包`bootstrap-fileinput-4.3.2`中,通常会包含以下文件和目录: - `dist/`:包含编译后的CSS和JS文件,可以直接在项目中使用。 - `docs/`:文档和示例,帮助开发者理解和使用组件。 - `src/`:源代码,供...
2. **js**目录:包含必要的JavaScript文件,如`bootstrap-fileinput.js`是主插件文件,`plugins/*`目录下的文件则是插件的各个扩展功能,如图片缩略图、文件预览等。 3. **css**目录:包含样式文件,如`fileinput....
在"bootstrap-fileinput.rar"压缩包中,包含了两个关键文件:`fileinput.min.css`和`fileinput.min.js`,它们是实现Bootstrap Fileinput功能的核心组件。 `fileinput.min.css`文件是CSS样式表,它定义了插件的各种...
在本压缩包"bootstrap-fileinput-upload.zip"中,包含了一个基于 Bootstrap 的文件上传演示(demo),该示例可以帮助开发者理解如何在网页上实现用户友好的文件上传功能。 在Bootstrap的文件输入插件中,主要涉及到...
5. **国际化支持**:Bootstrap-fileinput支持多语言,可以根据项目需求配置不同语言的提示信息。 6. **自定义主题**:通过修改CSS样式,可以轻松定制文件输入框的外观,以适应不同的项目需求。 7. **图片预览**:...