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. e.g.-basic-Si

    ! Band structure of silicon. The points listed after plot1d below are the ! vertices joined in the b ...

  2. Hook钩子编程

    钩子(Hook),是Windows消息处理机制的一个平台,钩子实际上是一个处理消息的程序段,通过系统调用,把它挂入系统,以监视指定窗口的某种消息.每当特定的消息发出,在没有到达目的窗口前,钩子程序就先 ...

  3. oracle在centos6.5安装

    说明 很多操作是默认,具体定制另说. 安装 参考http://www.linuxidc.com/Linux/2014-02/97374p4.htm 这篇是上面那篇的整合版:http://www.cnb ...

  4. MQ基础概念和介绍

    一.中间件 MQ是一种中间件产品,至于什么是中间件,中间件能干什么,参见以下链接: http://baike.baidu.com/view/23710.htm 二.WebSphere MQ的原理 We ...

  5. TokuMX唯一索引不支持dropDups选项

    TokuMX v1.5.0的唯一索引(unique index)不支持dropDups选项, 如果源数据包含相同目标key的文档,将无法建立唯一索引. 问题场景: 从MongoDB到TokuMX的数据 ...

  6. 【SQL模板】三.插入/更新 数据模板TSQL

    ---Name: 插入/更新 数据模板.sql ---Purpose: 用于更新 数据库中 历史数据 或 插入 新数据 的脚本模板 ---Author: xx ---Time: 2015-12-18 ...

  7. 设计模式之flyweight享元模式

    运用共享技术支持大量细粒度对象的使用 Flyweight模式(享元) Java深入到一定程度,就不可避免的碰到设计模式这一概念,了解设计模式,将使自己对java中的接口或抽象类应用有更深的理解.设计模 ...

  8. Hibernate不能实时获取MySQL数据库的更新

    在hibernate.cfg.xml配置文件中,增加以下内容: <property name="hibernate.connection.provider_class"> ...

  9. exit--进程退出;wait--进程等待;execl--执行程序

    函数原型:void exit(int status) 参数说明:退出状态. 函数原型:pid_t wait(int *status) 头文件:#include<sys/types.h>,# ...

  10. ubuntu系统下安装pyspider:搭建pyspider服务器新手教程

    首先感谢“巧克力味腺嘌呤”的博客和Debian 8.1 安装配置 pyspider 爬虫,本人根据他们的教程在ubuntu系统中进行了实际操作,发现有一些不同,也出现了很多错误,因此做此教程,为新手服 ...