Aps.net中基于bootstrapt图片上传插件的应用
Aps.net中基于bootstrapt图片上传插件的应用
在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中。为了外观好看使用了bootstrapt插件。插件下载地址: http://www.jq22.com/jquery-info5231

index.html中的代码:
<script>
//初始化函数
$("#file-1").fileinput({
uploadUrl: 'image/Handler.ashx', // you must set a valid URL here else you will get an error
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
}); </script>
很多博友在uploadUrl的参数设置中总是表达不清除,使用什么MVC接受图片的信息,现在MVC使用已经下降,我使用一般处理程序完成了图片得保存。
public class Handler : IHttpHandler
{
MethodUpload md = new MethodUpload();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
// context.Response.Write(md.SaveFile(context));
addFile();
}
/// <summary>
/// 添加图片的方法
/// </summary>
public void addFile()
{
HttpFileCollection files = HttpContext.Current.Request.Files;
try
{
for (int iFile = ; iFile < files.Count; iFile++)
{
///'检查文件扩展名字
HttpPostedFile postedFile = files[iFile];
string fileName, fileExtension;
fileName = System.IO.Path.GetFileName(postedFile.FileName);
if (fileName != "")
{
fileExtension = System.IO.Path.GetExtension(fileName);
string path = System.Web.HttpContext.Current.Request.MapPath("images/"); if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
postedFile.SaveAs(path + fileName);
}
}
}
catch (System.Exception Ex)
{ }
} public bool IsReusable
{
get
{
return false;
}
}
}
Aps.net中基于bootstrapt图片上传插件的应用的更多相关文章
- ssm项目中KindEditor的图片上传插件,浏览器兼容性问题
解决办法: 原因:使用@ResponseBody注解返回java对象,在浏览器中是Content-Type:application/json;charset=UTF-8 我们需要返回字符串(Strin ...
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
- kindeditor 图片上传插件
富文本编辑器,kindeditor是比较好用的一款.需要的功能都有,文档.demo也详细.有什么功能去官网看一眼就好. 官网:http://kindeditor.net/ 一些好用的如图片上传,kin ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- Django中怎么做图片上传--图片展示
1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...
- hybird app项目实例:安卓webview中HTML5拍照图片上传
应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...
随机推荐
- 教育改革——国家认证 “网红” 编程语言 Python
特大消息!!! 不止是上海计算机二级考试 ,全国计算机考试等级考试也有要求 如果你正打算考计算机等级,那你需要学习以下知识 要求学习的知识太多了,我就不一一在这里展示了! 一.考试改革的目标 据悉 ...
- css-display
1. none:隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 2. inline:指定对象为内联元素. 3. block:指定对象为块元素. 4. inl ...
- [Spark内核] 第37课:Task执行内幕与结果处理解密
本课主题 Task执行内幕与结果处理解密 引言 这一章我们主要关心的是 Task 是怎样被计算的以及结果是怎么被处理的 了解 Task 是怎样被计算的以及结果是怎么被处理的 Task 执行原理流程图 ...
- appium-chromedriver@3.0.1 npm ERR! code ELIFECYCLE npm ERR! errno 1
解决方法: npm install appium-chromedriver@3.0.1 --ignore-scripts 或者(安装方法): npm install appium-chromedriv ...
- ionic2 开始第一个App(二)
安装App指令:ionic start 你的项目文件夹名称 tabs 安装指令如: ionic start myApp tabs 安装时间有点长,耐心等待~ 进入myApp文件夹指令:cd myApp ...
- [原创]同一个Tomcat,配置多个context、多个Host
需求前提: 系统结束后,需要部署到服务器上. 目前只可以映射到一个固定IP的非80端口. 而server端和web端都要暴露到外网. 所以配置两个context,使得client应用不需要添加服务名, ...
- LevelDB的源码阅读(四) Compaction操作
leveldb的数据存储采用LSM的思想,将随机写入变为顺序写入,记录写入操作日志,一旦日志被以追加写的形式写入硬盘,就返回写入成功,由后台线程将写入日志作用于原有的磁盘文件生成新的磁盘数据.Leve ...
- Java_web学习(二) eclipse(tomcat)配置
1.先下载eclipse,隔代版本最佳 https://www.eclipse.org/ 2.创建workspace01存放项目代码 3.配置工作目录: IDE相关配置信息 2 没有配置tomcat, ...
- 分享一个android静默安装,安装后重新启动app的方法
一:需求简介 之前boss提出一个需求,运行在广告机上的app,需要完成自动升级的功能,广告机是非触摸屏的,不能通过手动点击,所以app必须做到自动下载,自动安装升级,并且安装完成后,app还要继续运 ...
- 学习笔记-echarts x,y轴样式
//改变坐标轴文本的样式axisLabel:{ textStyle:{ color:'#fff' }},//改变坐标轴和文本的样式axisLine:{ lineStyle:{ color:'#fff' ...