前几天朋友说用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. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  3. Node.js 上传图片并保存

    Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...

  4. js 上传图片、压缩、旋转

    亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  5. 原生 js 上传图片

    js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  6. Js上传图片并生成缩略图

    Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...

  7. js上传图片到七牛云存储

    项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...

  8. js 上传图片,用户自定义截取图片大小

    js 上传图片,用户自定义截取图片大小 js 组件

  9. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

随机推荐

  1. STM32 HAL库的使用心得

    1.I2C函数中HAL_I2C_Mem_Write和HAL_I2C_Master_Transmit有啥区别?{ 使用HAL_I2C_Mem_Write等于 先使用HAL_I2C_Master_Tran ...

  2. FPGA跨时钟域握手信号的结构

    FPGA跨时钟数据传输,是我们经常遇到的问题的,下面给出一种跨时钟握手操作的电路结构.先上图 先对与其他人的结构,这个结构最大的特点是使用 req 从低到高或者高到低的变化 来表示DIN数据有效并开始 ...

  3. HDFS-HA高可用

    HDFS-HA工作机制 通过双NameNode消除单点故障 HDFS-HA工作要点 1.元数据管理方式需要改变 内存中各自保存一份元数据: Edits日志只有Active状态的NameNode节点可以 ...

  4. 算法与数据结构(一) 线性表的顺序存储与链式存储(Swift版)

    温故而知新,在接下来的几篇博客中,将会系统的对数据结构的相关内容进行回顾并总结.数据结构乃编程的基础呢,还是要不时拿出来翻一翻回顾一下.当然数据结构相关博客中我们以Swift语言来实现.因为Swift ...

  5. 在linux环境下用中文查询数据库

    1.用SQL在linux环境下,查询语句的中文条件,查不到结果. mysql -h ***.***.***.*** -P 3303 -uroot -p*********** -D boztax -e ...

  6. HNOI2019退役记

    退役 警告. 今年虽然我没有变强, 但是还是比去年强一点(去年树形dp都不会). Day0 明天就是省选了,晚上22:13还没有睡觉,真的是状态不好. 打了一下LCT的板子,发现终于理解了...(这叫 ...

  7. 【渗透攻防】千变万化的WebShell

    前言WebShell就是以asp.php.jsp或者cgi等网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门.本篇文章将带大家学习如何获取WebShell,如何隐藏WebShell,有 ...

  8. W3bsafe]SQLmap过狗命令的利用+教程

    W3bsafe]SQLmap过狗命令的利用+教程 本文转自:i春秋社区 我就是那个爱装逼的小人   本屌又来装逼了 SQLmap注入的时候 有的肯定会被安全狗拦截吧 本屌来教各位过狗!过waf等安全狗 ...

  9. deepin卸载mysql并安装设置mysql5.7

    mysql完全卸载以及安全安装 完全卸载 sudo apt purge mysql-* sudo rm -rf /etc/mysql/ /var/lib/mysql sudo apt autoremo ...

  10. 整理+学习《骆昊-Java面试题全集(中)》

    这部分主要是与Java Web和Web Service相关的面试题. 96.阐述Servlet和CGI的区别? 答:Servlet与CGI的区别在于Servlet处于服务器进程中,它通过多线程方式运行 ...