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. Django的admin介绍

    我们看到我们创建一个默认的django的项目,他在project的urls有一个admin的url的路径 我们访问这个路径,他是一个登陆框,需要输入用户名和密码 我们就需要创建这个用户名和密码,如果你 ...

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

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

  3. win8.1下cocos2d-x 3.x环境搭建

    Win8.1下Cocos2d-x 3.4环境搭建 第一步: 需要下载的:(Windows 64位系统下环境搭建) Ant   apache-ant-1.9.4-bin.zip NDK   androi ...

  4. shell中数组基础语法

    数组的基本赋值 arr=(a b c) arr[index]=a 2.常用的两个方法 str=${arr[@]}(数组转化成字符串) len=${#arr[*]}(数组长度) 3.遍历数组的方法 #! ...

  5. FormValidator表单验证

    所需的库文件 红色框内是所需要的JavaScript库文件. <%@ page language="java" contentType="text/html; ch ...

  6. livecd-creator: UnicodeEncodeError: 'ascii' codec can't encode characters in position 1282-1

    通过livecd-creator进行构建ISO过程中出现题目中错误, livecd-creator命令属于包livecd-tools 问题原因: 编码错误,初步判断应该与编码相关的环境变量设置有关 解 ...

  7. Ubuntu下安装VirtualBox并为其添加USB支持

    1.下载VirtualBox软件包和USB支持包 下载网址均为官方网站(可在此查看其使用教程):https://www.virtualbox.org/wiki/Downloads (若下载各平台各版本 ...

  8. 5. Import the project download from Git

    1.Recover eclipse project Copy .project from other project(You can new a project first in eclipse. T ...

  9. centos / debian 安装iptables服务

    debian: #使用可参考 https://www.debian.cn/archives/991 #配置文件位于 /etc/iptables #重新配置使用dpkg-reconfigure ipta ...

  10. 彻底关闭win10的自动更新,一定要坚持看到最后一页

    https://jingyan.baidu.com/article/9faa7231e7b78b473c28cbb6.html 是否好使我还在测试,不好使的话,再跟新 2018-05-20 今天电脑又 ...