前几天朋友说用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. cordova 开发
			
    这个挺好用的, 确实 把一个 Android 和 IOS 的App 给生成了. html为前端, js调用 Java 或 object -C的代码. 加快了开发的进度 在不使用插件的基础上 ,基本实现 ...
    
			
    2. 
						
  2. 4-Django开发post、get接口
			
    一.创建django应用程序 方法一:创建django项目时直接创建应用程序 方法二:命令行创建 1.进入manage.py所在目录 2.执行常见命令:python manage.py startap ...
    
			
    3. 
						
  3. FPGA计算中定标与位扩展的实现
			
    我不知道名字取对没有,在FPGA计算中有时往往需要在不溢出的情况下将数扩大,从而获得更好的计算精度. 比如.在一个8位宽的系统中,将x=0000_0010,算术左移m=5位之后得到xt=0100_00 ...
    
			
    4. 
						
  4. JavaScript中的日期时间函数
			
    1.Date对象具有多种构造函数,下面简单列举如下 new Date() new Date(milliseconds) new Date(datestring) new Date(year, mont ...
    
			
    5. 
						
  5. itext实现pdf自动定位合同签订
			
    需求 需要实现如下效果(最终效果) 思考 需求方的要求就是实现签订合同,实现方法不限,但过程中又提出需要在签章的过程中把签订日期的文字也打上去,这就有点坑了~ 一开始的想法是想办法定位需要签名的位置, ...
    
			
    6. 
						
  6. idea 过段时间java程序包不存在问题 ？
			
    有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...
    
			
    7. 
						
  7. 神经网络架构PYTORCH－宏观分析
			
    基本概念和功能: PyTorch是一个能够提供两种高级功能的python开发包,这两种高级功能分别是: 使用GPU做加速的矢量计算 具有自动重放功能的深度神经网络从细的粒度来分,PyTorch是一个包 ...
    
			
    8. 
						
  8. Python - 网络爬虫（Web Scraping）
			
    专栏 从零开始写Python爬虫:https://zhuanlan.zhihu.com/Ehco-python requests库的安装与使用:http://t.cn/RTuUuf7 BS4库的安装与 ...
    
			
    9. 
						
  9. Java多线程可以分组，还能这样玩！
			
    前面的文章,栈长和大家分享过多线程创建的3种方式<实现 Java 多线程的 3 种方式>. 但如果线程很多的情况下,你知道如何对它们进行分组吗? 和 Dubbo 的服务分组一样,Java  ...
    
			
    10. 
						
  10. python高级-异常(13)
			
    一.异常介绍 print("1---------------------") open("123.txt","r") print(" ...
    
			
    11.