ajax C# webapi上传图片
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上传图片的更多相关文章
- Asp.Net WebApi上传图片
webapi using System; using System.Collections; using System.Collections.Generic; using System.Diagno ...
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- WebApi上传图片 await关键字
await关键字对于方法执行的影响 将上一篇WebApi上传图片中代码修改(使用了await关键字)如下: [HttpPost] public async Task<string> Pos ...
- jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- kindeditor修改图片上传路径-使用webapi上传图片到图片服务器
kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- TP3.2:实现Ajax无刷新上传图片
1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果: 3.html代码: <html> <head> < ...
- ajax+webapi上传图片问题
自己想写一个原生的JS的图片上传,不想一直只是使用上传文件的框架 网上有很多jquery上传图片上传文件的插件,但是要不是用特定的后台框架接收,要不就是只能上传图片,不是文件,还有一些其他的问题,所以 ...
随机推荐
- cf451C-Predict Outcome of the Game
http://codeforces.com/problemset/problem/451/C A - Predict Outcome of the Game Time Limit:2000MS ...
- Ugly number丑数2,超级丑数
[抄题]: [思维问题]: [一句话思路]:Long.valueOf(2)转换为long型再做 [输入量]:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况(不合法不合理的输入): [画图 ...
- iOS 代码调试
僵尸对象导致crash(Thread 1:EXC_BAD_ACCESS(code=EXC_I386_GPFLT)),需要给位release模式,debug模式不打印内存地址 https://blog. ...
- Linux之常用命令
1.cd命令 这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切换到 ...
- AasyncTask中执行execute()还是executeOnExecutor()
executeOnExecutor()api 11 才出现的 并行的 效率比execute()高因为execute()是串行的 import android.app.Activity; import ...
- 如何区分USB 2.0 和USB 3.0插口
USB3.0的速度是USB2.0的十倍,并且比USB2.0更加节能,同时,还能向下兼容USB2.0.那么,我们怎么区分USB2.0 和 USB 3.0呢. 电脑(有USB2.0和USB3.0的插口) ...
- 挪过来的spring mvc 的入门 介绍
目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...
- Vue-cli 配置开发环境让测试服务器监听所有IP
//config/inex.js // Various Dev Server settingshost: '0.0.0.0', // can be overwritten by process.env ...
- Vue.js 2.0 跨域请求数据
Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...
- 06 数据库入门学习-视图、sql注入、事务、存储过程
一.视图 1.什么是视图 视图本质是一张虚拟的表 2.为什么要用 为了原表的安全 只要有两大功能 1.隐藏部分数据,开放指定数据 2.视图可以将查询结果保存,减少sql语句的次数 特点: 1.视图使用 ...