引入JS和CSS

 bundles.Add(new ScriptBundle("~/bundles/fileinputJs").Include(
"~/Content/vendors/bootstrap-fileinput-master/js/fileinput.min.js",
"~/Content/vendors/bootstrap-fileinput-master/js/locales/zh.js",
"~/Scripts/fileHelper.js"
));
bundles.Add(new StyleBundle("~/Content/vendors/bootstrap-fileinput-master/css/fileinputCss").Include(
"~/Content/vendors/bootstrap-fileinput-master/css/fileinput.min.css"));

html

                    <input type="file" name="img" id="img" class="file-loading" />

封装的fileinput的js

jQuery.extend({
UploadImg: function ($control, uploadUrl, customOption) {
var option = {
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'], //接收的文件后缀
// showPreview: true,
// showUpload: true, //是否显示上传按钮
// overwriteInitial: false,
// autoReplace:true,
// browseClass: "btn btn-primary", //按钮样式
// dropZoneEnabled: true,//是否显示拖拽区域
// minImageWidth: 50, //图片的最小宽度
// minImageHeight: 50,//图片的最小高度
// maxImageWidth: 1000,//图片的最大宽度
// maxImageHeight: 1000,//图片的最大高度
// maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
// minFileCount: 1,
// maxFileCount: 1, //表示允许同时上传的最大文件个数
// enctype: 'multipart/form-data',
// validateInitialCount: true
// previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
// msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
};
if (customOption != null) {
$.extend(option, customOption);
}
//初始化上传控件的样式
$control.fileinput(option);
// //上传前
// $control.on('filepreupload', function (event, data, previewId, index) {
//
// });
// //导入文件上传完成之后的事件
// $control.on("fileuploaded", function (event, data, previewId, index) {
// if (data.response.ResultType === 0) {
// $input.val(data.response.Message);
// }
// else {
// toastr.error(data.response.Message);
// }
// });
// //异步上传错误结果处理
// $control.on("fileerror", function (event, data, msg) {
// toastr.error("网络错误,请重新提交");
// });
// //同步上传成功结果处理
// $control.on('filebatchuploadsuccess', function (event, data, previewId, index) {
// if (data.response.ResultType === 0) {
// $input.val(data.response.Message);
// }
// else {
// toastr.error(data.response.Message);
// }
// });
// //同步上传错误结果处理
// $control.on('filebatchuploaderror', function (event, data, msg) {
// toastr.error("网络错误,请重新提交");
// });
// //移除按钮事件
// $control.on("filecleared", function (event, data, msg) {
// $input.val('');
// });
}
});
$.UploadImg($("#img"), "/Admin/Mien/UploadImg/" + hid, null);

//异步上传成功结果处理
$("#img").on("fileuploaded",
function (event, data, previewId, index) { if (data.response.state === 1) {
console.log(data.response);
$("#echo_img").attr("src", "../../../Content/MienImg/" + data.response.name);
swal({
title: data.response.msg,
type: "success",
confirmButtonText: "确认"
});
} else {
swal({
title: data.response.msg,
type: "error",
confirmButtonText: "确认"
});
} }); //异步上传错误结果处理
$("#img").on("fileerror",
function(event, data, msg) {
swal({
title: "上传失败",
type: "error",
confirmButtonText: "确认"
}); });

后台图片上传

        //图片上传
[HttpPost]
public JsonResult UploadImg(int id)
{
if (id < )
return Json(new { msg = "参数错误,不允许上传", state = }, JsonRequestBehavior.AllowGet);
try
{
var files = Request.Files[];
var iu = new ImageUpload
{
FormFile = files,
SavePath = @"~/Content/MienImg/"
};
iu.Upload(); var result = iu.Error;
switch (result)
{
case :
return Json(new { msg = "没有上传的文件", state = }, JsonRequestBehavior.AllowGet);
case :
return Json(new { msg = "类型不允许", state = }, JsonRequestBehavior.AllowGet);
case :
return Json(new { msg = "大小超过限制", state = }, JsonRequestBehavior.AllowGet);
case :
return Json(new { msg = "未知错误", state = }, JsonRequestBehavior.AllowGet);
} if (result != )
return Json(new { msg = "结果不再返回值中", state = }, JsonRequestBehavior.AllowGet);
var name = iu.OutFileName;
var model = _bll.QueryById(id);
model.MienImg = @"~/Content/MienImg/" + name;
model.LastTime = DateTime.Now;
var mresult = _bll.Modify(model);
return Json(mresult > ? new { msg = "主题图上传成功", state = , name = name } : new { msg = "主题图上传失败", state = , name = "" }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new { msg = "捕获到异常" + ex, state = }, JsonRequestBehavior.AllowGet); }
}

图片帮助类

using System;
using System.Drawing;
using System.IO;
using System.Web;
using System.Web.UI.HtmlControls; namespace FuturesContest.Tools
{
/// <summary>
/// 文件类型
/// </summary>
public enum FileExtension
{
JPG = ,
GIF = ,
BMP = ,
PNG = ,
RAR = ,
jpg = ,
exe = ,
xml = ,
html = ,
aspx = ,
cs = ,
js = ,
txt = ,
sql =
} /// <summary>
/// 图片检测类
/// </summary>
public static class FileValidation
{
#region 上传图片检测类
/// <summary>
/// 是否允许
/// </summary>
public static bool IsAllowedExtension(HttpPostedFile oFile, FileExtension[] fileEx)
{
int fileLen = oFile.ContentLength;
byte[] imgArray = new byte[fileLen];
oFile.InputStream.Read(imgArray, , fileLen);
MemoryStream ms = new MemoryStream(imgArray);
System.IO.BinaryReader br = new System.IO.BinaryReader(ms);
string fileclass = "";
byte buffer;
try
{
buffer = br.ReadByte();
fileclass = buffer.ToString();
buffer = br.ReadByte();
fileclass += buffer.ToString();
}
catch { }
br.Close();
ms.Close();
foreach (FileExtension fe in fileEx)
{
if (Int32.Parse(fileclass) == (int)fe) return true;
}
return false;
} /// <summary>
/// 上传前的图片是否可靠
/// </summary>
public static bool IsSecureUploadPhoto(HttpPostedFile oFile)
{
bool isPhoto = false;
string fileExtension = System.IO.Path.GetExtension(oFile.FileName).ToLower();
string[] allowedExtensions = { ".gif", ".png", ".jpeg", ".jpg", ".bmp" };
for (int i = ; i < allowedExtensions.Length; i++)
{
if (fileExtension == allowedExtensions[i])
{
isPhoto = true;
break;
}
}
if (!isPhoto)
{
return true;
}
FileExtension[] fe = { FileExtension.BMP, FileExtension.GIF, FileExtension.JPG, FileExtension.PNG }; if (IsAllowedExtension(oFile, fe))
return true;
else
return false;
} /// <summary>
/// 上传后的图片是否安全
/// </summary>
/// <param name="photoFile">物理地址</param>
public static bool IsSecureUpfilePhoto(string photoFile)
{
bool isPhoto = false;
string Img = "Yes";
string fileExtension = System.IO.Path.GetExtension(photoFile).ToLower();
string[] allowedExtensions = { ".gif", ".png", ".jpeg", ".jpg", ".bmp" };
for (int i = ; i < allowedExtensions.Length; i++)
{
if (fileExtension == allowedExtensions[i])
{
isPhoto = true;
break;
}
} if (!isPhoto)
{
return true;
}
StreamReader sr = new StreamReader(photoFile, System.Text.Encoding.Default);
string strContent = sr.ReadToEnd();
sr.Close();
string str = "request|<script|.getfolder|.createfolder|.deletefolder|.createdirectory|.deletedirectory|.saveas|wscript.shell|script.encode|server.|.createobject|execute|activexobject|language=";
foreach (string s in str.Split('|'))
{
if (strContent.ToLower().IndexOf(s) != -)
{
File.Delete(photoFile);
Img = "No";
break;
}
}
return (Img == "Yes");
}
#endregion
} /// <summary>
/// 图片上传类
/// </summary>
//----------------调用-------------------
//imageUpload iu = new imageUpload();
//iu.AddText = "";
//iu.CopyIamgePath = "";
//iu.DrawString_x = ;
//iu.DrawString_y = ;
//iu.DrawStyle = ;
//iu.Font = "";
//iu.FontSize = ;
//iu.FormFile = File1;
//iu.IsCreateImg =;
//iu.IsDraw = ;
//iu.OutFileName = "";
//iu.OutThumbFileName = "";
//iu.SavePath = @"~/image/";
//iu.SaveType = ;
//iu.sHeight = ;
//iu.sWidth = ;
//iu.Upload();
//--------------------------------------
public class ImageUpload
{
#region 私有成员
private int _Error = ;//返回上传状态。
private int _MaxSize = * ;//最大单个上传文件 (默认)
private string _FileType = "jpg;gif;bmp;png";//所支持的上传类型用"/"隔开
private string _SavePath = System.Web.HttpContext.Current.Server.MapPath(".") + "\\";//保存文件的实际路径
private int _SaveType = ;//上传文件的类型,0代表自动生成文件名
// private HtmlInputFile _FormFile;//上传控件。
private HttpPostedFileBase _Files;
private string _InFileName = "";//非自动生成文件名设置。
private string _OutFileName = "";//输出文件名。
private bool _IsCreateImg = true;//是否生成缩略图。
private bool _Iss = false;//是否有缩略图生成.
private int _Height = ;//获取上传图片的高度
private int _Width = ;//获取上传图片的宽度
private int _sHeight = ;//设置生成缩略图的高度
private int _sWidth = ;//设置生成缩略图的宽度
private bool _IsDraw = false;//设置是否加水印
private int _DrawStyle = ;//设置加水印的方式0:文字水印模式,1:图片水印模式,2:不加
private int _DrawString_x = ;//绘制文本的X坐标(左上角)
private int _DrawString_y = ;//绘制文本的Y坐标(左上角)
private string _AddText = "GlobalNatureCrafts";//设置水印内容
private string _Font = "宋体";//设置水印字体
private int _FontSize = ;//设置水印字大小
private int _FileSize = ;//获取已经上传文件的大小
private string _CopyIamgePath = System.Web.HttpContext.Current.Server.MapPath(".") + "/images/5dm_new.jpg";//图片水印模式下的覆盖图片的实际地址
#endregion #region 公有属性
/// <summary>
/// Error返回值
/// 1、没有上传的文件
/// 2、类型不允许
/// 3、大小超限
/// 4、未知错误
/// 0、上传成功。
/// </summary>
public int Error
{
get { return _Error; }
} /// <summary>
/// 最大单个上传文件
/// </summary>
public int MaxSize
{
set { _MaxSize = value; }
} /// <summary>
/// 所支持的上传类型用";"隔开
/// </summary>
public string FileType
{
set { _FileType = value; }
} /// <summary>
/// 保存文件的实际路径
/// </summary>
public string SavePath
{
set { _SavePath = System.Web.HttpContext.Current.Server.MapPath(value); }
get { return _SavePath; }
} /// <summary>
/// 上传文件的类型,0代表自动生成文件名
/// </summary>
public int SaveType
{
set { _SaveType = value; }
} /// <summary>
/// 上传控件
/// </summary>
public HttpPostedFileBase FormFile
{
set { _Files = value; }
} /// <summary>
/// 非自动生成文件名设置。
/// </summary>
public string InFileName
{
set { _InFileName = value; }
} /// <summary>
/// 输出文件名
/// </summary>
public string OutFileName
{
get { return _OutFileName; }
set { _OutFileName = value; }
} /// <summary>
/// 输出的缩略图文件名
/// </summary>
public string OutThumbFileName
{
get;
set;
} /// <summary>
/// 是否有缩略图生成.
/// </summary>
public bool Iss
{
get { return _Iss; }
} /// <summary>
/// 获取上传图片的宽度
/// </summary>
public int Width
{
get { return _Width; }
} /// <summary>
/// 获取上传图片的高度
/// </summary>
public int Height
{
get { return _Height; }
} /// <summary>
/// 设置缩略图的宽度
/// </summary>
public int sWidth
{
get { return _sWidth; }
set { _sWidth = value; }
} /// <summary>
/// 设置缩略图的高度
/// </summary>
public int sHeight
{
get { return _sHeight; }
set { _sHeight = value; }
} /// <summary>
/// 是否生成缩略图
/// </summary>
public bool IsCreateImg
{
get { return _IsCreateImg; }
set { _IsCreateImg = value; }
} /// <summary>
/// 是否加水印
/// </summary>
public bool IsDraw
{
get { return _IsDraw; }
set { _IsDraw = value; }
} /// <summary>
/// 设置加水印的方式
/// 0:文字水印模式
/// 1:图片水印模式
/// 2:不加
/// </summary>
public int DrawStyle
{
get { return _DrawStyle; }
set { _DrawStyle = value; }
} /// <summary>
/// 绘制文本的X坐标(左上角)
/// </summary>
public int DrawString_x
{
get { return _DrawString_x; }
set { _DrawString_x = value; }
} /// <summary>
/// 绘制文本的Y坐标(左上角)
/// </summary>
public int DrawString_y
{
get { return _DrawString_y; }
set { _DrawString_y = value; }
} /// <summary>
/// 设置文字水印内容
/// </summary>
public string AddText
{
get { return _AddText; }
set { _AddText = value; }
} /// <summary>
/// 设置文字水印字体
/// </summary>
public string Font
{
get { return _Font; }
set { _Font = value; }
} /// <summary>
/// 设置文字水印字的大小
/// </summary>
public int FontSize
{
get { return _FontSize; }
set { _FontSize = value; }
} /// <summary>
/// 文件大小
/// </summary>
public int FileSize
{
get { return _FileSize; }
set { _FileSize = value; }
} /// <summary>
/// 图片水印模式下的覆盖图片的实际地址
/// </summary>
public string CopyIamgePath
{
set { _CopyIamgePath = System.Web.HttpContext.Current.Server.MapPath(value); }
} #endregion #region 私有方法
/// <summary>
/// 获取文件的后缀名
/// </summary>
private string GetExt(string path)
{
return Path.GetExtension(path);
} /// <summary>
/// 获取输出文件的文件名
/// </summary>
private string FileName(string Ext)
{
if (_SaveType == || _InFileName.Trim() == "")
return DateTime.Now.ToString("yyyyMMddHHmmssfff") + Ext;
else
return _InFileName;
} /// <summary>
/// 检查上传的文件的类型,是否允许上传。
/// </summary>
private bool IsUpload(string Ext)
{
Ext = Ext.Replace(".", "");
bool b = false;
string[] arrFileType = _FileType.Split(';');
foreach (string str in arrFileType)
{
if (str.ToLower() == Ext.ToLower())
{
b = true;
break;
}
}
return b;
}
#endregion #region 上传图片
public void Upload()
{
var hpFile = _Files;
if (hpFile == null || hpFile.FileName.Trim() == "")
{
_Error = ;
return;
}
string Ext = GetExt(hpFile.FileName);
if (!IsUpload(Ext))
{
_Error = ;
return;
}
int iLen = hpFile.ContentLength;
if (iLen > _MaxSize)
{
_Error = ;
return;
}
try
{
if (!Directory.Exists(_SavePath)) Directory.CreateDirectory(_SavePath);
byte[] bData = new byte[iLen];
hpFile.InputStream.Read(bData, , iLen);
string FName;
FName = FileName(Ext);
string TempFile = "";
if (_IsDraw)
{
TempFile = FName.Split('.').GetValue().ToString() + "_temp." + FName.Split('.').GetValue().ToString();
}
else
{
TempFile = FName;
}
FileStream newFile = new FileStream(_SavePath + TempFile, FileMode.Create);
newFile.Write(bData, , bData.Length);
newFile.Flush();
int _FileSizeTemp = hpFile.ContentLength; string ImageFilePath = _SavePath + FName;
if (_IsDraw)
{
if (_DrawStyle == )
{
System.Drawing.Image Img1 = System.Drawing.Image.FromStream(newFile);
Graphics g = Graphics.FromImage(Img1);
g.DrawImage(Img1, , , Img1.Width, Img1.Height);
Font f = new Font(_Font, _FontSize);
Brush b = new SolidBrush(Color.Red);
string addtext = _AddText;
g.DrawString(addtext, f, b, _DrawString_x, _DrawString_y);
g.Dispose();
Img1.Save(ImageFilePath);
Img1.Dispose();
}
else
{
System.Drawing.Image image = System.Drawing.Image.FromStream(newFile);
System.Drawing.Image copyImage = System.Drawing.Image.FromFile(_CopyIamgePath);
Graphics g = Graphics.FromImage(image);
g.DrawImage(copyImage, new Rectangle(image.Width - copyImage.Width - , image.Height - copyImage.Height - , copyImage.Width, copyImage.Height), , , copyImage.Width, copyImage.Height, GraphicsUnit.Pixel);
g.Dispose();
image.Save(ImageFilePath);
image.Dispose();
}
} //获取图片的高度和宽度
System.Drawing.Image Img = System.Drawing.Image.FromStream(newFile);
_Width = Img.Width;
_Height = Img.Height; //生成缩略图部分
if (_IsCreateImg)
{
#region 缩略图大小只设置了最大范围,并不是实际大小
float realbili = (float)_Width / (float)_Height;
float wishbili = (float)_sWidth / (float)_sHeight; //实际图比缩略图最大尺寸更宽矮,以宽为准
if (realbili > wishbili)
{
_sHeight = (int)((float)_sWidth / realbili);
}
//实际图比缩略图最大尺寸更高长,以高为准
else
{
_sWidth = (int)((float)_sHeight * realbili);
}
#endregion this.OutThumbFileName = FName.Split('.').GetValue().ToString() + "_s." + FName.Split('.').GetValue().ToString();
string ImgFilePath = _SavePath + this.OutThumbFileName; System.Drawing.Image newImg = Img.GetThumbnailImage(_sWidth, _sHeight, null, System.IntPtr.Zero);
newImg.Save(ImgFilePath);
newImg.Dispose();
_Iss = true;
} if (_IsDraw)
{
if (File.Exists(_SavePath + FName.Split('.').GetValue().ToString() + "_temp." + FName.Split('.').GetValue().ToString()))
{
newFile.Dispose();
File.Delete(_SavePath + FName.Split('.').GetValue().ToString() + "_temp." + FName.Split('.').GetValue().ToString());
}
}
newFile.Close();
newFile.Dispose();
_OutFileName = FName;
_FileSize = _FileSizeTemp;
_Error = ;
return;
}
catch
{
_Error = ;
return;
}
}
#endregion
}
}

期货大赛项目|九,fileinput插件的应用的更多相关文章

  1. 期货大赛项目|五,表格插件datatatables在MVC中的应用

    系统中都需要表格,我见过最好的表格就是Datatables了,但中文文档有限,英文能力有限,就写一些简单用法 上图看效果先 要了分页和排序 基本用法 引入js和css bundles.Add(new ...

  2. 期货大赛项目|四,MVC的数据验证

    上图先看下效果 样式先不说,先了解下数据验证是怎么实现的 一 必须是强类型的视图 二 这些显示提示的话语,都在强类型的实体中 三 必须使用Html.BeginForm或者Html.AjaxBeginF ...

  3. 期货大赛项目|八,ueditor的应用

    百度开发的富文本编辑器还是很不错的,可以已经不维护了 下载ueditor1_4_3_3-utf8-net放到项目中 找到net文件夹下config.json 修改以下两行 "imageUrl ...

  4. 期货大赛项目|六,iCheck漂亮的复选框

    废话不多说,直接上图 对,还是上篇文章的图,这次我们不研究datatables,而是看这个复选框,比平常的复选框漂亮太多 看看我是如何实现的吧 插件叫iCheck 用法也简单 引入js和css $(& ...

  5. 期货大赛项目|十,MVC对js和css的压缩

    在Global.asax中添加两行代码 //默认在调试期间,不会启用js和css的压缩 //下面的语句确保了在调试期间也压缩css和js BundleTable.EnableOptimizations ...

  6. 期货大赛项目|三,autofac简单用法

    autofac是依赖注入 我们以前要引入一个dal层,是这么写的 private IDal _dao = new Dal() 我们可以看得出,这样写,我们的bll层不光依赖了接口IDal,还依赖了Da ...

  7. 期货大赛项目|二,DAL详解

    接口层就不重点讲述了,直接DAL层 DAL层 using System; using System.Collections.Generic; using System.Linq; using Syst ...

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

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

  9. maven项目配置findbugs插件 使用git钩子控制代码的提交

    maven项目配置findbugs插件对代码进行静态检测 当发现代码有bug时,就不让用户commit代码到远程仓库里 没有bug时才可以commit到远程仓库中 (1)新建maven项目 ,配置fi ...

随机推荐

  1. pc端前端和手機端區別

    1.pc端寬度比較固定,手機端可以橫屏或者豎屏: 2.pc端不需要處理手機觸摸,而手機端需要: 3.pc端不需要處理鍵盤事件: 3.pc的瀏覽器內核很多,手機端基本上是webkit或者是基於webki ...

  2. Python 正则处理_re模块

    正则表达式 动机 文本处理成为计算机常见工作之一 对文本内容搜索,定位,提取是逻辑比较复杂的工作 为了快速方便的解决上述问题,产生了正则表达式技术 定义 文本的高级匹配模式, 提供搜索, 替换, 本质 ...

  3. 【POJ 1740】A New Stone Game

    这真是一道博弈论的好题啊 还是采用OI届的惯用套路,从简单想起 如果只有一堆石子,那么一定先手必胜 如果有两堆石子,那么我们考虑如下两种情况 2.1 两堆石子数量相同,那么无论先手怎么拿,后手都有一种 ...

  4. Linux基本命令总结(七)

    接上篇: 33,Linux中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以使用Ctrl+C键,但是,对于 ...

  5. 2019南昌邀请赛网络预选赛 I. Max answer(单调栈+暴力??)

    传送门 题意: 给你你一序列 a,共 n 个元素,求最大的F(l,r): F(l,r) = (a[l]+a[l+1]+.....+a[r])*min(l,r); ([l,r]的区间和*区间最小值,F( ...

  6. <二>ELK-6.5.3学习笔记–使用rsyslog传输管理nginx日志

    http://www.eryajf.net/2362.html 转载于 本文预计阅读时间 28 分钟 文章目录[隐藏] 1,nginx日志json化. 2,发送端配置. 3,接收端配置. 4,配置lo ...

  7. ACM-ICPC 2018 徐州赛区网络预赛 C Cacti Lottery(期望+暴力)

    https://nanti.jisuanke.com/t/31455 题意 给一个3*3的方格填入 1-9 九个数 有些数是已知的,有些数是对方已知但我未知的,有些数是大家都未知的 我要计算取得最大的 ...

  8. 第十二节: EF的三种模式(二) 之 ModelFirst模式(SQLServer为例)

    一. 简介  顾名思义,ModelFirst是模型优先,是DBFirst的逆向模式,先建立实体数据模型,然后根据实体数据模型来生成数据库,从而驱动整个开发流程.(生成一个空的edmx文件,手动在里面建 ...

  9. 使用ArcMap做一个1:5000标准分幅图并编号

    实现这个project,十进制度.渔网工具.Excel if/Text函数.挂接Excel表.空间连接.投影这些知识是必须的.看懂本篇博文也就意味着大概掌握了以上知识. 坐标数据设置与编号标准依据&l ...

  10. vue-cli3.X 打包后上传服务器刷新报 404的问题

    vue-cli3.X 默认配置 比2.X体验好很多,比如路由 如图,本地正常,传到服务器,因为二级目录,刷新就404,或 502等,找不到文件 nginx解决: location /{ error_p ...