前几天朋友说用js上传图片过去遇到点问题，于是自己也想写一个demo这里就把自己挖的坑填了。
话不多说上代码
前台就一个file控件加按钮
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="scripts/jquery-1.9.1.min.js"></script>
</head> <body>
<input type="file" name="file" id="testFile" nultiple="multiple" />
<input type="button" id="btnSend" value="上传" onclick="UploadFile()" /> <script>
function UploadFile() {
var formData = new FormData();
jQuery.support.cors = true;
var file = $("#testFile")[0].files[0];
formData.append("file", file);
$.ajax({
type: "post",
url: "./api/file/FileByAsyncTask",
data: formData,
async: false,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data.statusText);
}
});
}
</script>
</body>
</html>
这里需要注意的就是在发送文件的时候需要使用FormData进行传递
后台代码（用了三种方式处理）
public class FileController : ApiController
{
TimeSpan tspan = DateTime.Now - new DateTime(, , ); /// <summary>
/// 图片上传接口
/// </summary>
/// <returns></returns>
[HttpPost]
public HttpResponseMessage FileUpload()
{
if (!Request.Content.IsMimeMultipartContent("form-data"))
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
HttpResponseMessage response = new HttpResponseMessage();
try
{
HttpPostedFile file = HttpContext.Current.Request.Files["file"];//获取http传输的文件
string domainPath = HttpRuntime.AppDomainAppPath.ToString();//物理路径 二选一
string serverPath = System.Web.Hosting.HostingEnvironment.MapPath("~/images/img/");//物理路径
string ext = Path.GetExtension(file.FileName);//获取扩展名
string newName = tspan.TotalMilliseconds + ext;//时间戳+扩展名形成新文件名 //方式一 直接保存上传文件
//FileByHttpPostedFile(file,serverPath,tspan.TotalMilliseconds+ext); //方式二 图片流处理
//ImageByStream(file, serverPath, newName); //方式三 先创建文件在移动到指定目录 response.Headers.Add("Access-Control-Allow-Origin", "*");
response.Headers.Add("Access-Control-Alow-Method", "post");
response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
response.Headers.Add("Access-Control-Max", "");
return response;
}
catch (Exception e)
{
throw e;
}
} /// <summary>
/// 方法一 通过HttpPostedFile保存
/// </summary>
/// <param name="file">Http接收到的文件</param>
/// <param name="savePath">保存地址</param>
/// <param name="filename">文件名</param>
public void FileByHttpPostedFile(HttpPostedFile file, string serverPath, string fileName)
{
file.SaveAs(serverPath + fileName);
} public void ImageByStream(HttpPostedFile file, string serverPath, string fileName)
{
using (Image img = Bitmap.FromStream(file.InputStream))
{
img.Save(serverPath + fileName);
}
} /// <summary>
/// 异步上传
/// </summary>
/// <param name="postFile"></param>
/// <returns></returns>
[HttpPost]
public async Task<bool> FileByAsyncTask()
{
if (!(HttpContext.Current.Request.Files.Count > ))//判断是否文件
return false;
HttpPostedFile postFile = HttpContext.Current.Request.Files["file"];//获取文件
string serverPath = System.Web.Hosting.HostingEnvironment.MapPath("~/images/img/");//获取服务器地址
var provider = new MultipartFormDataStreamProvider(serverPath);//创建MIME 多部分正文新实例
IEnumerable<HttpContent> parts = null;
Task.Factory.StartNew(() =>
{
parts = Request.Content.ReadAsMultipartAsync(provider).Result.Contents;//异步获取多部分正文内容
},CancellationToken.None,
TaskCreationOptions.LongRunning,
TaskScheduler.Default).Wait();
foreach (var file in provider.FileData)//文件保存
{
FileInfo _fileInfo = new FileInfo(file.LocalFileName);
var fileName = file.Headers.ContentDisposition.FileName.Replace("\"","");//从内容读取文件名
string _ext = Path.GetExtension(fileName);//content获取文件名是 \"header.jpg\" 函数识别字符串 header.jpg所以需要去掉双引号
string _savePath = Path.Combine(serverPath + tspan.TotalMilliseconds + _ext);
_fileInfo.MoveTo(_savePath);
}
return true;
}
}
比较菜，希望以后继续努力
c#使用js上传图片的更多相关文章
-
JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
-
js上传图片前预览方法（支持预览多个图片）
运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...
-
Node.js 上传图片并保存
Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...
-
js 上传图片、压缩、旋转
亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
-
原生 js 上传图片
js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
-
Js上传图片并生成缩略图
Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...
-
js上传图片到七牛云存储
项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...
-
js 上传图片，用户自定义截取图片大小
js 上传图片,用户自定义截取图片大小 js 组件
-
js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
随机推荐
-
win7下IIS的安装和配置 图文教程
转自 http://www.jb51.net/article/29787.htm 最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功.在博客里记录一下,给需要的 ...
-
AngularJS常用指令
一.指令 1.ng-app 定义应用程序的根元素 <div ng-app="app"></div> var app = angular.module('ap ...
-
jmeter 与 java http
jmeter 如果对java代码进行测试 1.eclips中创建一个项目,且写一个待测试的简单java代码 2.将jmeter路径下 x:\xx\lxx\Dowxxxxxx\apache-jmeter ...
-
linux下安装mongodb（php版本5.3）
转:原文出处忘记了. 1. 下载MongoDB 2. 解压文件到某目录下,然后重命名: [root@localhost var]# tar -xzvf mongodb-linux-i686-2.0.1 ...
-
c++的引用（二）
/*按地址传递*/ #include <iostream> using namespace std; void swap(int *a, int *b) { int c; c = *a; ...
-
图解Javascript之字符串
好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我大天朝网友所绘制.个人感觉此图,覆盖全面,细节考虑甚周全,因此分享给大家,同时在此特别感谢网友的无私分享!
-
Hibernate中事务小案例
理论知识: 什么是事务? 指作为单个逻辑工作单位执行的一系列操作,要么完全的执行,要么完全不执行.事务处理可以确保非事务性单元内的所有操作都完全完成,否则永久不会更新面向数据的资源.通过将一组操作组合 ...
-
karaf 控制台 常用linux指令(1)
0,切换命令当前域名 -bash代码 *:feature 命令是由域名+命令名组成的,切换当前域名,比如切换到*:feature,那么再输入list,则执行的是feature:list,切换到*:bu ...
-
在ASP.NET Core MVC中子类Controller拦截器要先于父类Controller拦截器执行
我们知道在ASP.NET Core MVC中Controller上的Filter拦截器是有执行顺序的,那么如果我们在有继承关系的两个Controller类上,声明同一种类型的Filter拦截器,那么是 ...
-
js封装Cookie操作 js 获取cookie js 设置cookie js 删除cookie
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code var CookieUtil = { // 设置cookie set : functi ...