这两天朋友问我,有没有异步上传图片到本地/服务器这种demo,他有用, 我就想,好吧, 那刚好周末了,整理一套出来。

主要用到的是jquery uploadify 这个juqery的插件 ,可以无刷新,直接后台上传返回地址

下面先看前台的代码:

@{
ViewBag.Title = "Demo";
Layout = "~/Views/Shared/_Layout.cshtml";
} @section styles{
<link href="~/Content/uploadify.css" rel="stylesheet" />
} <h2>Demo</h2> <h2>实例</h2>
<div class="form-group">
<input class="form-control" type="file" id="PickImage" name="PickImage" value="浏览图片" />
</div> <div class="form-group">
<img class="img-rounded" id="Rimg" width="200" height="200"/>
</div> @section scripts{
<script src="~/Scripts/jquery.uploadify.min.js"></script>
<script>
jQuery(function () {
$('#PickImage').uploadify({
'swf': '/Content/uploadify.swf', 'buttonText': '选择图片并上传',
'uploader': '@Url.Action("UploadImage","Demo")',
'fileTypeDesc': '图片类型',
'fileTypeExts': '*.jpg;*.jpeg;*.png',
"formData": { "folder": "/product/" },
onUploadSuccess: function (localFileObject, serverData, receivedResponse) {
console.log(serverData)
if (typeof (serverData) == "string")
serverData = JSON.parse(serverData);
$("#HeadImgurl").val(serverData.ImagePath);
$("#Rimg").attr("src", serverData.ImagePath);
},
onUploadComplete: function (fileObj) {
}
}); });
</script>
}

后台的代码也很简单:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace Demo_UploadImageToServer.Controllers
{
public class DemoController : Controller
{
// GET: Demo
public ActionResult Demo()
{
return View();
} #region 帮助方法
//图片异步上传
public ActionResult UploadImage()
{
Response.ContentType = "text/plain";
Response.Charset = "utf-8"; HttpPostedFileBase file = Request.Files["Filedata"];
string path = ConfigurationManager.AppSettings["Domain"].ToString(); //填写服务器域名
string basePath = "/UploadPic/";
string uploadPath = Server.MapPath(basePath); //本地路径
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string fileName = file.FileName;
string ext = fileName.Substring(fileName.LastIndexOf("."));
fileName = DateTime.Now.Ticks + ext;
file.SaveAs(uploadPath + fileName); //服务器上传
//return Json(new { ImagePath = string.Format("{0}{1}{2}", path, basePath, fileName) }); //本地上传
return Json(new { ImagePath = string.Format("{0}{1}", basePath, fileName) });
}
else
{
return Json(new { error = });
}
}
#endregion
}
}

MVC异步上传图片到本地/服务器的更多相关文章

  1. kindeditor修改图片上传路径-使用webapi上传图片到图片服务器

    kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...

  2. kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  3. kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  4. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

  5. Ajax实现异步上传图片

    要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  6. 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  7. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  8. mvc异步表单遇到的问题

    1,mvc异步表单遇到的问题    问题:使用jqury easy ui 时提交异步数据不能请求到服务器   解决办法:经过细心调试和检测,发现jqury的加载顺序放在了easy ui之后,所以首先加 ...

  9. asp.net mvc异步查询

    对于asp.net mvc异步查询 如何做MVC异步查询,做列表页面. 查询是项目中必不可少的工作,而且不同的项目不同的团队,都有自己的简单方法.Asp.net mvc 有自己独特的优势,下面是结合m ...

随机推荐

  1. 解决Webpack中提示syntax 'classProperties' isn't currently enabled的错误

    当我们使用了一些JavaScript的一些新特性的时候,但是有没有在webpack.config.js里面或者是.babelrc文件中配置相关插件,就可以解决了. error:Support for ...

  2. Django URL(路由系统)

    Django URL Django 1.11版本 URLconf官方文档 URL配置(URLconf)就像 Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的 ...

  3. PAT 1093. Count PAT's

    The string APPAPT contains two PAT's as substrings. The first one is formed by the 2nd, the 4th, and ...

  4. Codeforces 918C/917A - The Monster

    传送门:http://codeforces.com/contest/918/problem/C 一个括弧串由字符‘(’和‘)’组成.一个正确的串可被递归地定义,定义如下: ①空串e是一个正确的串: ② ...

  5. [cogs461] [网络流24题#10] 餐巾 [网络流,最小费用最大流]

    建图:从源点向第一层连边,第一层表示当天用掉多少餐巾,第二层表示当天需要多少餐巾,所以注意购买餐巾的边容量为无穷大,要从源点开始连向第二层的点,每天可能有剩余,在第一层内表示为流入第二天的节点.具体见 ...

  6. hpu第六次周赛Problem F

    Problem F Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  7. ASP.NET MVC 源码分析(一)

    ASP.NET MVC 源码分析(一) 直接上图: 我们先来看Core的设计: 从项目结构来看,asp.net.mvc.core有以下目录: ActionConstraints:action限制相关 ...

  8. 使用同步适配器(sync adapter)数据传输

    在android设备与webserver之间实现数据同步能显著提高你的应用的有用性.让你的应用更受用户的欢迎. 比方说.你的数据上传给webserver,这就有了一个有用的备份.当用户的设备离线工作时 ...

  9. Lucene 4.0 TieredMergePolicy

    默认的merge policy. findMerges: 先将全部段依照扣除删除文档之后的字节数(bytesize * (1.0 - delRatio))降序排,对当中size() > 2.5G ...

  10. Mongodb---记一次事故故障

    2014.06.19.001---故障报告 事故发生时间 事故简述 事故责任方 是否解决 19:21-20:15 IISserverD盘即将溢出 是 一.事故描写叙述: 在19:21收到警报.显示II ...