前几天朋友说用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. centos jdk 配置及版本切换
			
    一. 环境变量: /etc/profile JAVA_HOME=/usr/lib/jdk1.8.0_91JRE_HOME=/usr/lib/jdk1.8.0_91/jreCLASS_PATH=.:$J ...
    
			
    2. 
						
  2. OpenXml修改word特定内容
			
    采用OpenXml来修改word特定内容,如下: word: OpenXml修改word之前: OpenXml修改word之后: 代码: string path = @"C:\Users\A ...
    
			
    3. 
						
  3. JAVA核心技术第一卷第三章
			
    JAVA中包含的数据类型:
    
			
    4. 
						
  4. Numpy学习三：数组运算
			
    1.转置 #reshape(shape)函数改变数组形状,shape是一个元组,表示数组的形状 创建一个包含15个元素的一维数组,通过reshape函数调整数组形状为3行5列的二维数组arr = np ...
    
			
    5. 
						
  5. Docker学习笔记-磁盘挂载运行.netcore
			
    前言: 环境:centos7.5 64 位 正文: 首先我们在宿主机上安装 .NET Core SDK sudo rpm --import https://packages.microsoft.com ...
    
			
    6. 
						
  6. 第86节：Java中的JQuery基础
			
    第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display  ...
    
			
    7. 
						
  7. 第63节:Java中的Spring MVC简介笔记
			
    前言 感谢! 承蒙关照~ Java中的Spring MVC简介笔记 MVC简介 Spring MVC 基本概念 Spring MVC 项目搭建 maven 使用Spring MVC进行开发 实现数据绑 ...
    
			
    8. 
						
  8. redis入门知识汇总
			
    1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库 ...
    
			
    9. 
						
  9. python图像处理库PIL的基本概念介绍
			
    PIL中所涉及的基本概念有如下几个:通道(bands).模式(mode).尺寸(size).坐标系统(coordinate system).调色板(palette).信息(info)和滤波器(filt ...
    
			
    10. 
						
  10. Saiku多用户使用时数据同步刷新（十七）
			
    Saiku多用户使用时数据同步刷新 这里我们需要了解一下关于saiku的刷新主要有两种数据需要刷新: >1 刷新数据库的表中的数据,得到最新的表数据进行展示. >2 刷新cube信息,得到 ...
    
			
    11.