html ajax上传图片到服务器 后端采用asp.net webapi

前端有各种现实上传图片的控件,样式可以做的很美观。我这里只用基本的样式做图片上传。

前端代码

   <input name="Userfile" id="Userfile" type="file"></span>

js代码

 var formDate = new FormData();
var files = $("#Userfile").get(0).files; formDate.append("Userfile", files[0]);
//如果有其他参需要一起提交到后台
formDate.append("location", location); $.ajax({
type: "POST",
url: url,
contentType: false,
cache: false,
processData: false,
data: formDate,
error: function (request) { },
success: function (data) { }
});

C# webapi代码

        [HttpPost]
public object Save()
{
//图片存储路径
string path = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "img/";
//用户提交的数据
var Data = System.Web.HttpContext.Current.Request.Form;
string filesrc = string.Empty;
string src = string.Empty;
//获取上传的文件
var httpPostedFile = HttpContext.Current.Request.Files;
if (httpPostedFile != null && httpPostedFile.Count > )
{
var file = httpPostedFile[];
string imgType = Path.GetExtension(file.FileName);
//限制文件上传类型
if (imgType.Contains(".jpg")|| imgType.Contains(".png")|| imgType.Contains(".bmp"))
{
string FileName = Guid.NewGuid().ToString() + imgType;
filesrc = path + FileName;
src = "/images/" + FileName;
// 如果目录不存在则要先创建
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(filesrc); }
} if (!string.IsNullOrEmpty(src))
{
//存储图片路径到数据库
} }

ajax C# webapi上传图片的更多相关文章

  1. Asp.Net WebApi上传图片

    webapi using System; using System.Collections; using System.Collections.Generic; using System.Diagno ...

  2. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  3. WebApi上传图片 await关键字

    await关键字对于方法执行的影响 将上一篇WebApi上传图片中代码修改(使用了await关键字)如下: [HttpPost] public async Task<string> Pos ...

  4. jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  5. kindeditor修改图片上传路径-使用webapi上传图片到图片服务器

    kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...

  6. kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  7. kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  8. TP3.2:实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

  9. ajax+webapi上传图片问题

    自己想写一个原生的JS的图片上传,不想一直只是使用上传文件的框架 网上有很多jquery上传图片上传文件的插件,但是要不是用特定的后台框架接收,要不就是只能上传图片,不是文件,还有一些其他的问题,所以 ...

随机推荐

  1. valgrind: failed to start tool 'memcheck' for platform 'amd64-linux': No such file or directory

    这是没有配置lib环境变量的缘故. 注意要把lib配置放到path配置前面. 导出VALGRIND_LIB路径,用法如下(假设valgrind已经被安装到/home/test/valgrind目录): ...

  2. zoj1649-Rescue (迷宫最短路径)【bfs 优先队列】

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=649 Rescue Time Limit: 2 Seconds      Mem ...

  3. Sum of Consecutive Prime Numbers

    Sum of Consecutive Prime Numbers http://poj.org/problem?id=2739 Time Limit: 1000MS   Memory Limit: 6 ...

  4. fckeditor 数据库 取值 显示

    用fckeditor把html代码存到数据库中,取出来显示的时候用什么控件呢?用Literal  或  Label  控件.

  5. DLL另類劫持注入法

    // Win32Project2.cpp : 定义 DLL 应用程序的导出函数. // //////////////////////////////////////////////////////// ...

  6. hook进程

    https://www.cnblogs.com/Leo_wl/p/3311279.html https://blog.csdn.net/u013761036/article/details/65465 ...

  7. Perl注释文本的高亮显示规则

    sub help{ print <<EndOfUsage;\e[1;37mHELP :1. Usage :  perl $0 input output 2. Function : tran ...

  8. <asp:RadioButton> 选项判断

    小菜在项目中遇到一个<asp:RadioButton> 选择之后,让其控制其他标签显示或者隐藏的问题.记录以备忘记之需! <html xmlns="http://www.w ...

  9. Word插入圆圈数字

    https://wenku.baidu.com/view/3260a2f0a1c7aa00b52acb5a.html Word 中在对应位置输入四位字符,选中字符(如:选中 2473 ),按 Alt+ ...

  10. Duplicate entry '1' for key 'PRIMARY'

    这个bug产生在你建立主键的时候,就是说主键的id重复了,有两个同名的id,需要删除一个,才能满足主键的唯一性