前几天朋友说用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上传图片的更多相关文章
	

    
								
  1. JS 上传图片 + 预览功能（一）
		
    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
    
		
    2. 
						
  2. js上传图片前预览方法（支持预览多个图片）
		
    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...
    
		
    3. 
						
  3. Node.js 上传图片并保存
		
    Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...
    
		
    4. 
						
  4. js 上传图片、压缩、旋转
		
    亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
    
		
    5. 
						
  5. 原生 js 上传图片
		
    js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
    
		
    6. 
						
  6. Js上传图片并生成缩略图
		
    Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...
    
		
    7. 
						
  7. js上传图片到七牛云存储
		
    项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...
    
		
    8. 
						
  8. js 上传图片，用户自定义截取图片大小
		
    js 上传图片,用户自定义截取图片大小 js 组件
    
		
    9. 
						
  9. js上传图片及预览功能
		
    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 学习Python第七天
			
    进制拾遗: 二进制:01 八进制:01234567 十进制:0123456789 十六进制:0123456789ABCDEF 十进制转换八,十六进制语法 oct()八进制 关于8进制是逢8进一位的,我 ...
    
			
    2. 
						
  2. MapReduce实例学习
			
    https://blog.csdn.net/m0_37739193/article/details/77676859
    
			
    3. 
						
  3. 新FSM的一些思路
			
    好久之前写过一篇关于状态机的小例子,可以看这里http://www.cnblogs.com/mawanli/p/5966080.html,这篇博客首先感谢需要感谢当时看到凉鞋的笔记博客, 凉鞋的博客地 ...
    
			
    4. 
						
  4. Java程序入口：main()方法讲解
			
    Java程序的入口---main()方法的签名为:public static void main(String[] args) {...} ,其中, ♦ public修饰符:Java类由JVM调用,为 ...
    
			
    5. 
						
  5. 巧用这19条MySQL优化，效率至少提高3倍
			
    阅读本文大概需要 3.8 分钟. 作者丨喜欢拿铁的人 https://zhuanlan.zhihu.com/p/49888088 本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 1 ...
    
			
    6. 
						
  6. canvas转图片中的文字自动换行
			
    概述 最近项目用到了canvas转图片,但是由于canvas对文字排版的支持非常弱,一般我们在canvas上画不同排版的文字(比如竖排文字)都是利用js计算横纵坐标,然后一个字一个字地画出来,今天无意 ...
    
			
    7. 
						
  7. [Swift]枚举类型：UIBarButtonItem的24种样式
			
    UIBarButtonSystemItemFlexibleSpace 可变空白, 在调用的过程中,使用  UIBarButtonSystemItemFlexibleSpace去占位,达到实现规范化的目 ...
    
			
    8. 
						
  8. Anaconda / Conda 实践
			
    一.环境 CentOS 7.6 有预装 python 2.7 二.Anaconda 与 Conda 区别 1.Anaconda Anaconda 是Python的一种发行版.包含了: (1)conda ...
    
			
    9. 
						
  9. idea 过段时间java程序包不存在问题 ？
			
    有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...
    
			
    10. 
						
  10. ubuntu下opencv的版本切换及遇到的问题解决
			
    默认使用opencv 3.2的时候,使用SVM的时候,系统报错如下: error: ‘class MySVM’ has no member named ‘decision_func’ 解决方法:要把系 ...
    
			
    11.