.net core 2.0 webuploader上传图片
<link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>
html
<div id="uploader-demo">
<div id="filePicker" class="uploader-list"><img id="photo" style="width:50px;height:50px" src="/photo.jpg"></div>
</div>
.uploader-list {
width: 50px;
}
#filePicker .webuploader-pick{
background: rgba(0,0,0,0);
padding:;
}
js
function initUpload() {
$list = $('#fileList');
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '~/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: '/FileUp.ashx?address=Photo',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: {
id: '#filePicker'
},
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'//不要写'image/*'
},
fileSingleSizeLimit: 1024 * 1024 * 10 //限制单个上传图片的大小(限制上传单张图片文件大小,单位是B,1M=1024000B)
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
//start
//var $li = $(
// '<div id="' + file.id + '" class="file-item thumbnail">' +
// '<img>' +
// '<div class="info">' + file.name + '</div>' +
// '</div>'
// ),
//$img = $li.find('img');
// $list为容器jQuery实例
//$list.append($li);
//end
//上面这些代码是后来注掉的,为了实现单个图片上传
var uploadimgWidth = $('#fileList').width();
var thumbnailWidth = uploadimgWidth;
var thumbnailHeight = thumbnailWidth;
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb(file, function (error, src) {
if (error) {
$('#photo').replaceWith('<span>不能预览</span>');
return;
}
//$img.attr('src', src);
$('#photo').attr('src', src);//为了实现选择图片后显示选中的图片
}, thumbnailWidth, thumbnailHeight);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress span');
// 避免重复创建
if (!$percent.length) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file,response) {//respoonse是后台返回的内容
$('#' + file.id).addClass('upload-state-done');
});
// 文件上传失败,显示上传出错。
uploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').remove();
});
}
后台(一般处理程序)
context.Response.ContentType = "text/html";
if (context.Request.Files.Count <= )
{
return;
}
//创建文件夹
string name = context.Request["address"];
string dicPath = context.Server.MapPath("/UploadFiles/" + name + "/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/");
if (!Directory.Exists(dicPath))
{
Directory.CreateDirectory(dicPath);
}
//保存图片
HttpPostedFile img = context.Request.Files[];
string ext = Path.GetExtension(img.FileName);
string fileName = Guid.NewGuid().ToString() + ext;
string filePath = Path.Combine(dicPath, fileName);
img.SaveAs(filePath);
context.Response.Write(urlPrev+fileName);
public IHostingEnvironment _hostingEnvironment{get;set;}
public ActionResult UploadFile()
{
if (Request.Form.Files.Count <= )
{
return Content("请选择图片");
}
string name = Request.Query["address"];
string imgPath="\\UploadFiles\\" + name + "\\" + DateTime.Now.Year + "\\" + DateTime.Now.Month + "\\" + DateTime.Now.Day + "\\";
string dicPath = _hostingEnvironment.WebRootPath+imgPath;
if (!Directory.Exists(dicPath))
{
Directory.CreateDirectory(dicPath);
}
var img = Request.Form.Files[];
if(img==null){
return Content("上传失败");
}
string ext = Path.GetExtension(img.FileName);
//判断后缀是否是图片
const string fileFilt = ".jpg|.jpeg|.png|";
//判断后缀是否是图片
if (ext == null)
{
return Content("上传的文件没有后缀" );
}
if (fileFilt.IndexOf(ext.ToLower(), StringComparison.Ordinal) <= -)
{
return Content("上传的文件不是图片");
}
string fileName = Guid.NewGuid().ToString() + ext;
string filePath = Path.Combine(dicPath, fileName);
using(FileStream fs = System.IO.File.Create(filePath)){
img.CopyTo(fs);
fs.Flush();
}
return Content(imgPath+fileName);
}
.net core 2.0 webuploader上传图片的更多相关文章
- Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传
功能点: 1. 使用.net core 2.0 实现文件上传 2. 使用webuploader实现单文件,多文件上传 3. 使用webuploader实现大文件的分段上传. 4. 使用webuploa ...
- 【原生态跨平台:ASP.NET Core 1.0(非Mono)在 Ubuntu 14.04 服务器上一对一的配置实现-篇幅1】
鸡冻人心的2016,微软高产年. build 2016后 各种干货层出不穷. 1 Win10 集成了bash ,实现了纳德拉的成诺,Microsoft Love Linux!!! 2 跨平台 ,收 ...
- .Net Core 2.0 EntityFrameworkCore CodeFirst入门教程
最近难得有时间闲下来,研究了一下.net core 2.0,总的来说,目前除了一些第三方的库不支持外,基本上可以满足我们的项目需求了! 我们就以一个网站开发为例,搭建一个简单的三层架构,先熟悉一下.n ...
- 用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传
第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三 ...
- [Asp.net core 2.0]Ueditor 图片上传
摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...
- .NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布
众所周知,Red Hat和微软正在努力使.NET Core成为Red Hat企业版Linux (RHEL)系统上的一流开发平台选项.这个团队已经一起工作好几个月了,RHEL对.NET有许多需求.今天在 ...
- Castle Core 4.0.0 alpha001发布
时隔一年多以后Castle 项目又开始活跃,最近刚发布了Castle Core 4.0.0 的alpha版本, https://github.com/castleproject/Core/releas ...
- ASP.NET Core 1.0 开发记录
官方资料: https://github.com/dotnet/core https://docs.microsoft.com/en-us/aspnet/core https://docs.micro ...
- ASP.NET 5 RC1 升级 ASP.NET Core 1.0 RC2 记录
升级文档: Migrating from DNX to .NET Core Migrating from ASP.NET 5 RC1 to ASP.NET Core 1.0 RC2 Migrating ...
随机推荐
- Apache Spark 2.2.0新特性介绍(转载)
这个版本是 Structured Streaming 的一个重要里程碑,因为其终于可以正式在生产环境中使用,实验标签(experimental tag)已经被移除.在流系统中支持对任意状态进行操作:A ...
- nrf2401 - 最廉价的2.4G无线通信方案
所有的使用Arduino 的朋友大多都会知道大名鼎鼎的XBee 这个土豪级的ZigBee 的通信模块.我们是做产品开发的,对于XBee这个产品可谓是又爱又恨,不得不承认他确实是一个好货,从做工到功能都 ...
- JqGrid分页按钮图标不显示的bug
开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...
- SpringBoot集成Apache Shiro
笔者因为项目转型的原因,对Apache Shiro安全框架做了一点研究工作,故想写点东西以便将来查阅.之所以选择Shiro也是看了很多人的推荐,号称功能丰富强大,而且易于使用.实践下来的确如大多数人所 ...
- 人生就像一条加速奔向死亡的贪吃蛇【winform版】
群里聊天的时候,一个学妹说她在做贪吃蛇的小作业,于是昨晚(5.20无聊只好撸代码/(ㄒoㄒ)/~~)花了2个小时撸了一个出来,早上又花了些时间完善功能,就有了这个还算比较完善的版本,当然代码结构比较混 ...
- vue内置组件 transition 和 keep-alive 使用
1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...
- 我的微信小程序第二篇
在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不 ...
- [Loadrunner参数化]一个文件输两列参数的取值
关于LoadRunner参数化的内容,在脚本开发中属于非常重要的一个知识点.关于这部分知识,在书上和网上到处都能找到,本篇只讲一种特殊情况:一个参数化文件为File类型,有多列值,如何进行参数化取值. ...
- elasticsearch聚合操作——本质就是针对搜索后的结果使用桶bucket(允许嵌套)进行group by,统计下分组结果,包括min/max/avg
分析 Elasticsearch有一个功能叫做聚合(aggregations),它允许你在数据上生成复杂的分析统计.它很像SQL中的GROUP BY但是功能更强大. 举个例子,让我们找到所有职员中最大 ...
- iOS QRcode识别及相册图片二维码读取识别
https://www.jianshu.com/p/48e44fe67c1d 2016.03.30 10:32* 字数 892 阅读 16197评论 5喜欢 34赞赏 1 最近碰到一个用户 在使用我们 ...