.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 ...
随机推荐
- BZOJ1061 NOI2008 志愿者招募 线性规划、费用流
传送门 一道思路很妙的线性规划网络流 设\(X_i\)表示第\(i\)天需要的人数,\(P_i\)表示第\(i\)种人雇佣的个数 那么我们可以列出一系列式子 比如说样例就可以列出三个式子: \(P_1 ...
- UINavigationController - BNR
继续上篇UITableView的编辑操作. 当你初始化一个UINavigationController对象时,它将拥有一个根视图控制器,即UIViewController.根视图控制器一直存在于sta ...
- .net core jwt
https://www.cnblogs.com/JacZhu/p/6837676.html
- vue webpack打包 -webkit-box-orient 失效
一行省略 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 超出两行省略 overflow: hidden; text-o ...
- docker安装并修改Nginx镜像
1.安装nginx镜像,命令:docker pull nginx 2.创建nginx容器,并启动,命令:docker run --name webserver -d -p 192.168.51.227 ...
- 浅谈一类无关序列有前缀和性质的统计问题的离线解法 BZOJ3626
每次询问[l,r]区间,但所有信息是按另一种序列给出的,因此无法使用区间数据结构做这种题.将每个询问改为[1,x],考虑离线,则从1~n依次修改并查询即可. BZOJ3626 给定一颗树,每次询问给定 ...
- PAT L2-013 红色警报
https://pintia.cn/problem-sets/994805046380707840/problems/994805063963230208 战争中保持各个城市间的连通性非常重要.本题要 ...
- 2019省赛训练组队赛3.31周四-17fj
https://vjudge.net/contest/289558#overview A - Frog Therearex frogs and y chicken in a garden. Kim f ...
- SQL Server中JOIN的使用方法总结
JOIN 分为:内连接(INNER JOIN).外连接(OUTER JOIN).其中,外连接分为:左外连接(LEFT OUTER JOIN).右外连接(RIGHT OUTER JOIN).全外连接(F ...
- PHP单元测试PHPUnit
配置说明 1.全局安装phpunit命令脚本 1 2 3 4 5 $ wget https://phar.phpunit.de/phpunit-7.0.phar $ chmod +x phpunit- ...