.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 ...
随机推荐
- Nginx学习之如何搭建文件防盗链服务
前言 大家都知道现在很多站点下载资料都是要收费的,无论是积分还是金币,想免费只能说很少很少了,那么这些网站是如何做到资源防盗链的呢? 这里推荐一款比较容易上手的神器,Nginx本身提供了secure_ ...
- mybatis-高级结果映射之一对多
目录 1 数据准备 1.2 实体类, 接口和XML 2 一对多映射 2.1 collection集合映射 2.1.1 创建结果实体类 2.1.2 创建结果集 2.1.3 创建对应的方法和XML 2.1 ...
- iOS开发简记(9):APPStore审核
"觅知音"这个APP的第一个版本从提交审核到上架,历时三个星期,其中遇到一些审核上的问题,它的处理或许能帮助到遇到同样问题的小伙伴们,所以这里列举出来,这三个星期如何跟苹果的审核团 ...
- Linux 命令(二)
man help:线上查询及帮助命令 命令 --help:简单帮助 help cd:查看一些Linux命令行的一些内置命令 文件和目操作命令(19个) ls cd cp find mkdi ...
- Mysql权限操作、用户管理、密码操作
Mysql的权限 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表. mysql权限表的验证过程为: 先从user表中的Host,Use ...
- H5 58-网页的布局方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- anaconda 出现add 。。。进不去
找到.condarc 文件 C:\Users\leiyi内 把里面内容替换为 channels: - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pk ...
- XT535
今天金山误删了一个文件,把手机系统整坏了,故刷了个机,刷机教程: http://bbs.dospy.com/thread-15027415-1-623-1.html 中间安装了个驱动精灵,否则手机开启 ...
- semantic-ui 表单
1.定义表单 先看一个基础的表单,再讲解一下: <form class="ui form" method="post" action="&quo ...
- Linux系统mysql使用(一)
一.安装 sudo apt-get update #更新软件源 sudo apt-get install mysql-server #安装mysql 二.启动和关闭 service mysql sta ...