1.页面代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/fileinput.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/fileinput.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/zh.js"></script>
<script>
$(function () {
$("#input_1").fileinput({
language: 'zh',
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
enctype: 'multipart/form-data',
validateInitialCount: true,
showUploadedThumbs: true
});
});
</script>
</head>
<body>
<div>
@using (Html.BeginForm("Index1", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" id="input_1" name="excle" class="file-loading" data-preview-file-type="text">
<img src="@ViewBag.imagepath">
}
</div>
</body>
</html>

在这里主要遇到过两个问题，

第一个问题就是js的顺序问题，导致fileinput()初始化不成功。

第二个问题是@using (Html.BeginForm("Index1", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))

在这句代码中没有加入new { enctype = "multipart/form-data" }导致后台HttpPostFileBase 为null;

2.后台

思路：

1.首先通过HttpPostFileBase file=Request.Files["excle"];//excle为input 的name;

2.通过File.SaveAS(path)把excle保存到本地文件夹中。

3.如果是文字：

通过封装好的ExcelHelp类的ExcelToDataTable方法，把Excel 转换为datatable;

如果是图片；

图片的话需要借助PictureInfo 类和NpoiExtend 类这两个类读取到List<PictureInfo> list 中。

然后把通过System.Drawing.Image.Save()方法保存list.PictureData到相应的目录中！

然后就ok啦。

下面是后台图片的处理代码：

file.SaveAs(savepath);
DataTable dt = new DataTable();
FileStream fs = new FileStream(savepath, FileMode.Open, FileAccess.Read);
IWorkbook book = new XSSFWorkbook(fs);
ISheet sheet = book.GetSheet(book.GetSheetName(0));
List<PicturesInfo> list = new List<PicturesInfo>();
list = NpoiExtend.GetAllPictureInfos(sheet);
string dir = "/File/pictures/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";
string newfileName = Guid.NewGuid().ToString();
int j = 0;

list.ToList().ForEach(p =>
{
int i = 0;
string imagename = (i++).ToString();
string fulldir = dir + j.ToString() + "/" + imagename + ".jpg";
Directory.CreateDirectory(Path.GetDirectoryName(Request.MapPath(fulldir)));
Stream stream = new MemoryStream(p.PictureData);

Image image = Image.FromStream(stream);
ImageHelp imagehelp = new ImageHelp();
Bitmap myBitmap = new Bitmap(image);
ImageCodecInfo myImageCodecInfo = imagehelp.GetEncoderInfo("image/jpeg");
Encoder myEncoder = Encoder.Quality;
EncoderParameter myEncoderParameter = new EncoderParameter(myEncoder, 75L);
EncoderParameters myEncoderParameters = new EncoderParameters(1);
myEncoderParameters.Param[0] = myEncoderParameter;
image.Save(Request.MapPath(fulldir), myImageCodecInfo, myEncoderParameters);
j++;

在这里还用到了保证图片质量的PictureHelp类。

我一开始想用FileStream 类，直接保存byte[]类型的p.Picturedata字节流，但是经过无脑的百度和研究FileStream类，证明这不是可能的

因为FileStream 类只能读取具体的文件，要么这种文件是除图片外的，因为其他可以使用FileMode.OpenOrCreate方法创建没有数据的文件，而图片总不可能创建没有字节流的图片的。

所以经过一番瞎找，发现了一种已解决方法。因为Image.FromStream可以读取流。所以我就先把p.Picturedata转换成Stream，Stream stream = new MemoryStream(p.PictureData);然后通过Image.FromStream()这个方法转换成了Image类，接下来就可以通过Image.save(path);path注意一定要是服务器的虚拟地址；

但是这样保存下来的图片质量不忍直视，然后，我就经过高质量图片保存类PictureHelp，换了下图片质量。最终图片就成功保存了。

然后我就开始在网页上测试图片的质量了，下面是我的测试图：

结果证明图片的质量有那么一点提高，但是不多。。。

导入Excel 文件（图片和文字）NPOI+BootStrap fileinput 插件 的结合使用的更多相关文章

  1. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  2. .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  3. Java POI导入Excel文件

    今天在公司需要做个导入Excel文件的功能,所以研究了一下,参考网上的一些资料总算是做出来了,在此记录一下防止以后忘记怎么弄. 本人用的是poi3.8,所以需要的JAR包如下: poi-3.8.jar ...

  4. phpexcel导入excel文件报the filename xxx is not recognised as an OLE file错误。

    工作中频繁会用phpexcel类导入excel文件的数据到数据库,目前常用的excel文件格式有:xls.csv.xlsx. 刚开始,针对xls文件,使用如下程序,能正常运行: $objReader ...

  5. YII使用PHPExcel导入Excel文件的方法

    1.下载phpexcel,将压缩包中的classes复制到protected/extensions下并修改为PHPExcel. 2.修改YII配置文件config/main.php 'import'= ...

  6. springMVC(5)---导入excel文件数据到数据库

    springMVC(5)---导入excel文件数据到数据库 上一篇文章写了从数据库导出数据到excel文件,这篇文章悄悄相反,写的是导入excel文件数据到数据库.上一篇链接:springMVC(4 ...

  7. excel数据 入库mysql 和 mysql数据 导入excel文件

    1.excel数据入库mysql 首先准备excel文件, 标红的地方需要留意,一个是字段名所在行,一个表名对应页: 然后私用mysql工具 navicat, 选择数据库,然后导入文件, 选中相应ex ...

  8. java后端导入excel模板和导入excel文件去读数据

    模板转载地址:https://www.cnblogs.com/zhangyangtao/p/9802948.html 直接上代码(我是基于ssm写的demo,导入文件目前只能读取.xls后缀的exce ...

  9. C# Aspose.Cells方式导入Excel文件

    读取Excel 类 我返回的是DataTable 类型 也可以返回DataSet类型 public class XlsFileHelper { public DataTable ImportExcel ...

随机推荐

  1. SpringMVC 集成redis

    一.下载导入jar 二.配置redis 1.创建redis.properties # Redis settings #redis.host=192.168.20.101 #redis.port= #r ...

  2. jquery的2.0.3版本源码系列(7):3043行-3183行，deferred延迟对象，对异步的统一管理

    目录 part1 deferred延迟对象 part2  when辅助方法 网盘源代码 链接: https://pan.baidu.com/s/1skAj8Jj 密码: izta part1 defe ...

  3. 浅析Entity Framework Core中的并发处理

    前言 Entity Framework Core 2.0更新也已经有一段时间了,园子里也有不少的文章.. 本文主要是浅析一下Entity Framework Core的并发处理方式. 1.常见的并发处 ...

  4. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  5. Nodejs MSSQL详细解读

    MSSQL 是Nodejs用于连接Microsoft SQL Server 的插件. 安装方法 npm install mssql 配置Config const config = { user: '. ...

  6. Lua的函数调用和协程中，栈的变化情况

    Lua的函数调用和协程中,栈的变化情况 1. lua_call / lua_pcall   对于这两个函数,对栈底是没有影响的--调用的时候,参数会被从栈中移除,当函数返 回的时候,其返回值会从函数处 ...

  7. Leetcode题解（十三）

    36.Valid Sudoku 题目 代码如下: class Solution { public: bool isValidSudoku(vector<vector<char> &g ...

  8. javaScript函数提升及作用域

    代码片段: var a = 1; function foo() { console.log(a); //输出为undefined if (!a) { var a = 2; } alert(a); }; ...

  9. Knowledge_SPA——精研查找算法

    首先保证这一篇分析查找算法的文章,气质与大部分搜索引擎搜索到的文章不同,主要体现在代码上面,会更加高级,会结合到很多之前研究过的内容,例如设计模式,泛型等.这也与我的上一篇面向程序员编程--精研排序算 ...

  10. 设计模式的征途—12.享元（Flyweight）模式

    现在在大力推行节约型社会,“浪费可耻,节俭光荣”.在软件系统中,有时候也会存在资源浪费的情况,例如,在计算机内存中存储了多个完全相同或者非常相似的对象,如果这些对象的数量太多将导致系统运行代价过高.那 ...