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. LIS问题(DP解法)---poj1631

    题目链接:http://poj.org/problem?id=1631 这个题题目有些难看懂hhh,但实质就是求LIS--longest increasing sequence. 以下介绍LIS的解法 ...

  2. 前端知识--------HTML内容

    HTML介绍 1.web服务本质 import socket sk = socket.socket() sk.bind(('127.o.o.1',8080)) sk.listen() while 1: ...

  3. django的流程分析

    首先实现一个前端输入网址,后端返回不同的html文件的步骤 一.配置django 1.创建工程 2.创建app 二.配置setting 1.配置templates路径 2.注释跨站请求 三.配置pro ...

  4. JavaScript的数据类型和运算符总结

    1.定义变量用关键字 var var a = 1 var b = "abc" 2.javascript脚本每一行要用分号隔开 3.javascript的代码一般放在html代码的最 ...

  5. fusioncharts Y轴不显示中文的解决方法(转载)

    使用fusionChart主要是被其界面吸引了,各类图表都很好看,下载以后文档也很周全,支持的语言也很多种 ,容易上手.fusionChart工作原理主要是通过后台传xml数据源给报表前台flash ...

  6. OC 线程操作3 - NSOperation 实现线程间通信

    #import "ViewController.h" @interface ViewController () /** 图片 */ @property (weak, nonatom ...

  7. 使用Ansible部署etcd 3.2高可用集群

    之前写过一篇手动搭建etcd 3.1集群的文章<etcd 3.1 高可用集群搭建>,最近要初始化一套新的环境,考虑用ansible自动化部署整套环境, 先从部署etcd 3.2集群开始. ...

  8. 什么场景应该用 MongoDB(转)

    很多人比较关心 MongoDB 的适用场景,也有用户在话题里分享了自己的业务场景,比如: 案例1 用在应用服务器的日志记录,查找起来比文本灵活,导出也很方便.也是给应用练手,从外围系统开始使用Mong ...

  9. dedecms的自定义模块

    dedecms的自定义模块   1.在dedecms主目录下创建一个模块目录 2.在模块目录下创建如下目录 网站根目录/ |-自定义模块 |-control 控制器 |-model 模型 |-stat ...

  10. Storm 系列(一)基本概念

    Storm 系列(一)基本概念 Apache Storm(http://storm.apache.org/)是由 Twitter 开源的分布式实时计算系统. Storm 可以非常容易并且可靠地处理无限 ...