.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 ...
随机推荐
- Microsoft Artificial Intelligence Conference(2018.05.21)
时间:2018.05.21地点:北京嘉丽大酒店
- SpringBoot整合Shiro使用Ehcache等缓存无效问题
前言 整合有缓存.事务的spring boot项目一切正常. 在该项目上整合shiro安全框架,发现部分类的缓存Cache不能正常使用. 然后发现该类的注解基本失效,包括事务Transaction注解 ...
- Vue常规后台系统,路由懒加载实现基于菜单数据并解耦
路由依赖菜单 场景:文件名与路由组件名完全一致(随便大小写均可) 菜单使用一套,路由又存在一套,这样就很不舒服,于是做了如下处理: 尝试不用懒加载发现有难度,使用懒加载就很轻松了 data.js ex ...
- C# 实现实时网速
前言 最近参加了一个项目,所以写博客的时间就少了,项目中有一个功能就是在窗体上显示实时网速,用了半天的时间写了出来,想想今天时间蛮充足,就把它分享到博客上吧. 项目展示 项目核心代码: private ...
- AtCoder Beginner Contest 049 & ARC065 連結 / Connectivity AtCoder - 2159 (并查集)
Problem Statement There are N cities. There are also K roads and L railways, extending between the c ...
- 启动Tomcat的时候8080被占用
异常来源:启动Tomcat服务器报错: Several ports (8080, 8009) required by Tomcat v7.0 Server at localhost are alrea ...
- apache benchmark 的简单安装与测试
1. 下载apache benchmark Copy From https://blog.csdn.net/fyqaccpt96/article/details/43272001 yum instal ...
- Oracle创建'数据库'三步走
--创建表空间 create tablespace waterboss datafile 'd:\waterboss.dbf' size 100m autoextend on next 10m; -- ...
- MyBatis映射文件2(不支持自增的数据库解决方案/参数处理[单参、多参、命名参数])
针对Oracle不支持自增的解决方案 Oracle不支持自增,但是它使用序列来模拟自增,每次插入数据的主键是从序列中拿到的值,那么如何获取这个值呢? <insert id="addEm ...
- redis 的简单命令
以下实例讲解了如何启动 redis 客户端: 启动 redis 客户端,打开终端并输入命令 redis-cli.该命令会连接本地的 redis 服务. $redis-cli redis > re ...