Bootstrap-FileInput组件的简单Demo
<link href="~/BootstrapComponent/css/fileinput.css" rel="stylesheet" />
<script src="~/BootstrapComponent/js/fileinput.js"></script>
<script src="~/BootstrapComponent/js/locales/zh.js"></script>
<!--容器-->
<input id="inputFile" type="file" class="file" data-preview-file-type="text" name="file">
<!--JS代码-->
<script>
//初始化fileinput控件
$("#inputFile").fileinput({
language: 'zh',
autoReplace: false,
maxFileCount: 1,
allowedFileExtensions: ["jpg", "png", "gif"],
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
});
</script>
/// <summary>
/// MVC文件上传后台方法
/// </summary>
/// <returns></returns>
public JsonResult FileUpload()
{
string text = "位置错误!";
bool isSuccess = false;
var files = Request.Files;
if (files != null && files.Count > )
{
try
{
var file = files[];
var fileName = file.FileName;
var filePath = Path.Combine(HttpRuntime.AppDomainAppPath, "image", fileName); //绝对路径
file.SaveAs(filePath);
isSuccess = true;
text = "上传成功!";
}
catch (Exception e)
{
text = e.Message;
}
}
return Json(new { Success = isSuccess, Message = text }, JsonRequestBehavior.AllowGet);
}
Bootstrap-FileInput组件的简单Demo的更多相关文章
- bootstrap fileinput组件的使用
组件的下载地址为:https://github.com/kartik-v/bootstrap-fileinput 比较详细的介绍可参看:http://www.jq22.com/jquery-info5 ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- bootstrap fileinput 使用记录
第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- Bootstrap文件上传组件:bootstrap fileinput
为了上传预览pdf与图片特用此插件. 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput ...
- bootstrap fileinput控件 + django后台上传、回显简单使用
一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...
- 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
随机推荐
- 深入浅出Struts2
Struts2简单介绍 Struts 2框架作为Struts 1.X框架的替代技术,相对Struts 1.X来说,有着本质上的改变. Struts 2框架是从WebWork框架发展而来的.Apache ...
- Testbench代码设计技巧
Testbench代码设计技巧 " There are many ways " to code a test case, it all depens on the creativi ...
- bzoj1293: [SCOI2009]生日礼物(stl堆)
1293: [SCOI2009]生日礼物 题目:传送门 题解: 据说这道题乱搞随便就水过了 本蒟蒻想到了一个用堆的水法(还专门学了学queue): 如果把每一种颜色的下一个位置都记录一下的话,一开始就 ...
- 什么是域名的TTL值? ——一条域名解析记录在DNS缓存服务器中的存留时间
什么是域名的TTL值? 转自:http://hizip.net/index.php/archives/20/TTL(Time-To-Live),就是一条域名解析记录在DNS服务器中的存留时间.当各地的 ...
- lucene简单使用demo
测试结构目录: 1.索引库.分词器 Configuration.java package com.test.www.web.lucene; import java.io.File; import or ...
- BootStrap学习(二)——重写首页之topbar
1.布局容器 帮助文档:http://v3.bootcss.com/css/#overview-container BootStrap需要为页面内容和栅栏系统包裹一个.container容器.提供的两 ...
- Net Core链接数据库
原文 在Windows下,相信大家分分钟都可以搞定.而初次接触.net core + mysql可能需要注意些细节.首先打开vs2017新建一个asp.net core项目(选Web应用程序), 然后 ...
- swift语言点评十二-Subscripts
Classes, structures, and enumerations can define subscripts, which are shortcuts for accessing the m ...
- 3ds Max制作碗实例教程
一. 碗的建模.模型的结果如图WB—1所示: 图WB—1 1. 创建圆柱,并调节参数,转换到多边形,最终的结果图WB—2所示: 图WB—2 2.使用Inset(插入)插入一个面,再次执行Extrude ...
- li自定义图标
/*自定义list的图标*/ li{ list-style-image: url(../img/21.JPG); }