前几天朋友说用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. this用法总结
			
    在JavaScript中,this关键字可以说是最复杂的机制之一.对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题. 1.this的作用 为什么要在JavaScript中使用this呢 ...
    
			
    2. 
						
  2. day16_雷神_前端04
			
    前端day04 链接前端的一些库,一些资源,从bootcdn上搜,有前端所有的库. 前端工作流程: jquery的DOM文档操作 <!DOCTYPE html> <html lang ...
    
			
    3. 
						
  3. BigDecimal比较2个值是否相等，不能用equals，而要用compareTo
			
    BigDecimal比较相等,不能用equals,要用compareTo
    
			
    4. 
						
  4. Virtual Networking
			
    How the virtual networks used by guests work Networking using libvirt is generally fairly simple, an ...
    
			
    5. 
						
  5. js前段开发工具
			
    http://runjs.cn/?token=e87dac453af5caed08d1771682b0c3f5
    
			
    6. 
						
  6. js 大厦之JavaScript事件
			
    1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...
    
			
    7. 
						
  7. MySQL-8.0.11 在 Windows10 上的安装
			
    下载 MySQL8.0 For Windows zip包下载地址:https://dev.mysql.com/downloads/file/?id=476233. 进入页面后可以不登录,点击底部“No ...
    
			
    8. 
						
  8. 怎样在mybatis里向mysql中插入毫秒数的时间？
			
    由于业务场景需求,需要记录精准的时间,但是呢,又不要想使用int类型来存储时间,因为这样的可读性比较差了. 怎样在mybatis中向数据库插入毫秒级别的时间呢? 首先,先来看看怎样向数据库中插入毫秒时 ...
    
			
    9. 
						
  9. 初识KNN
			
    邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代 ...
    
			
    10. 
						
  10. Android--UI之ProgressBar
			
    前言 开门见山,开篇明意.这篇博客主要讲解一下Android中ProgressBar控件以及间接继承它的两个子控件SeekBar.RatingBar的基本用法,因为其有继承关系,存在一些共有特性,所以 ...
    
			
    11.