引入文件
<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>
css(可选,目的是把图片做成选择按钮,去掉背景色,为了美观)
.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);
.net core 2.0
1. 前四步与上面相同
2. 后台
 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没有server.MapPath和SaveAs,需要使用IHostingEnvironment
 
 
 

.net core 2.0 webuploader上传图片的更多相关文章

  1. Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传

    功能点: 1. 使用.net core 2.0 实现文件上传 2. 使用webuploader实现单文件,多文件上传 3. 使用webuploader实现大文件的分段上传. 4. 使用webuploa ...

  2. 【原生态跨平台:ASP.NET Core 1.0(非Mono)在 Ubuntu 14.04 服务器上一对一的配置实现-篇幅1】

    鸡冻人心的2016,微软高产年. build 2016后 各种干货层出不穷. 1 Win10 集成了bash  ,实现了纳德拉的成诺,Microsoft Love Linux!!! 2 跨平台  ,收 ...

  3. .Net Core 2.0 EntityFrameworkCore CodeFirst入门教程

    最近难得有时间闲下来,研究了一下.net core 2.0,总的来说,目前除了一些第三方的库不支持外,基本上可以满足我们的项目需求了! 我们就以一个网站开发为例,搭建一个简单的三层架构,先熟悉一下.n ...

  4. 用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 第三 ...

  5. [Asp.net core 2.0]Ueditor 图片上传

    摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...

  6. .NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布

    众所周知,Red Hat和微软正在努力使.NET Core成为Red Hat企业版Linux (RHEL)系统上的一流开发平台选项.这个团队已经一起工作好几个月了,RHEL对.NET有许多需求.今天在 ...

  7. Castle Core 4.0.0 alpha001发布

    时隔一年多以后Castle 项目又开始活跃,最近刚发布了Castle Core 4.0.0 的alpha版本, https://github.com/castleproject/Core/releas ...

  8. ASP.NET Core 1.0 开发记录

    官方资料: https://github.com/dotnet/core https://docs.microsoft.com/en-us/aspnet/core https://docs.micro ...

  9. 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 ...

随机推荐

  1. Long类型参数传到前端精度丢失的解决方案

        由于公司数据库表的id是利用雪花算法生成的,所以实体类里面定义的数据类型为Long.但是这个数据传到前端时,发生了精度丢失的现象.本文记录了从java后端的角度如何解决这个精度丢失的问题,便于 ...

  2. Spring Cloud 入门教程(六): 用声明式REST客户端Feign调用远端HTTP服务

    首先简单解释一下什么是声明式实现? 要做一件事, 需要知道三个要素,where, what, how.即在哪里( where)用什么办法(how)做什么(what).什么时候做(when)我们纳入ho ...

  3. Lambda表达式介绍(转)

    刚开始学lambda,lambda与linq的联合使用. Lambda表达式实际上是一个匿名函数.它包含表达式和语句,常用于创建委托或表达式目录树类型.所有Lambda表达式都是用Lambda运算符- ...

  4. .NET Core 2.1中的分层编译(预览)

    如果您是.NET性能的粉丝,最近有很多好消息,例如.NET Core 2.1中的性能改进和宣布.NET Core 2.1,但我们还有更多的好消息.分层编译是一项重要的新特性功能,我们可以作为预览供任何 ...

  5. 【全网最全的博客美化系列教程】01.添加Github项目链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  6. 关于always块内for循环的执行方式

    //该模块主要用来说明for结构在时序逻辑中的执行方式 :] eq_dly ); integer i; 'b1; always @(posedge clk_1 or negedge nrst) beg ...

  7. CentOS 7.2 yum安装LAMP环境

    https://www.linuxidc.com/Linux/2016-11/136766.htm 详见以上链接,用yum安装方便省事. 尤其注意,mysql数据要设置远程连接.

  8. 一个6亿的表a,一个3亿的表b,通过外间tid关联,你如何最快的查询出满足条件的第50000到第50200中的这200条数据记录

    1.如果A表TID是自增长,并且是连续的,B表的ID为索引 select * from a,b where a.tid = b.id and a.tid>500000 limit 200; 2. ...

  9. openstack-KVM管理工具

    一. virsh 通过libvirt API管理Hpervisor.node.domain,实现多数功能调用. 即统一管理多台计算机上的域. 1.管理其他服务器(node) (1)修改配置文件:vim ...

  10. 在tomcat8.0.x和tomcat9.0.x之间么突然冒出个tomcat 8.5

    Apache Tomcat 8 (8.5.38) - Documentation Indexhttps://tomcat.apache.org/tomcat-8.5-doc/index.html to ...