前几天朋友说用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. MyBatis逆向工程自动生成代码
			
    MyBatis逆向工程根据数据库表自动生成mapper.xml,entity类,mapper类,简直不要 太方便好嘛 下面贴上关键配置代码,以免以后找不到 generator.xml <?xml ...
    
			
    2. 
						
  2. linux 用tcpdump查看80端口访问有哪些IP
			
    linux 用tcpdump查看80端口访问有哪些IP: tcpdump -i eth0 -tnn dst port 80 -c 1000|awk -F"." '{print $1 ...
    
			
    3. 
						
  3. myEclipse配置jdk1.7
			
    第一步:下载jdk1.7 下载地址:http://download.csdn.net/download/chun201010/7824469 第二步:安装jdk1.7 将下载的压缩包进行解压,得到一个 ...
    
			
    4. 
						
  4. Centos 基本命令不能用恢复方法
			
    遇到命令都不能用,直接执行下面的语句就可以: export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/roo ...
    
			
    5. 
						
  5. SpringBoot中集成redis
			
    转载:https://www.cnblogs.com/zeng1994/p/03303c805731afc9aa9c60dbbd32a323.html 不是使用注解而是代码调用 需要在springbo ...
    
			
    6. 
						
  6. 简单的ld链接脚本学习
			
    一. 链接脚本的整体认识 什么是链接文件呢?作用是什么呢? 当编写了多个C文件时,我们将他们编译链接成一个可执行的文件,此时就需要用到链接脚本文件(ld).ld脚本主要功能就是:将多个目标文件(.o) ...
    
			
    7. 
						
  7. 深入Vue2.x的虚拟DOM diff原理
			
    一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...
    
			
    8. 
						
  8. nginx、swoole高并发原理初探
			
    阅前热身 为了更加形象的说明同步异步.阻塞非阻塞,我们以小明去买奶茶为例. 同步与异步 同步与异步的重点在消息通知的方式上,也就是调用结果通知的方式. 同步:当一个同步调用发出去后,调用者要一直等待调 ...
    
			
    9. 
						
  9. JS 取消iOS播放自动全屏：
			
    iOS下浏览器模式下h5播放器强制是全屏的,除非在app下才可以非全屏播放,需要两个配置: (1)播放器添加参数: playsinline:true(我使用的是阿里云的播放器,其他的需要自己找找是那个 ...
    
			
    10. 
						
  10. django在关闭debug后，admin界面 及静态文件无法加载的解决办法
			
    当debug为true的时候,ALLOWED_HOSTS是跳过不管用的.所以这里需要将debug关掉,令debug=false,ALLOWED_HOSTS=[ '*' ]表示所有的主机都可以访问 开启 ...
    
			
    11.