这两天朋友问我,有没有异步上传图片到本地/服务器这种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. H5 应用程序缓存(离线缓存)

    离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该 ...

  2. 好用的JS数字格式化

    /* *js格式化数字代码 * *value: 要格式化的数字值 *scale: 最多保留几位小数 *zeroed: 是否保留尾0 *percented: 是否转称百分比形式 * */ functio ...

  3. scrapy框架的日志等级和请求传参, 优化效率

    目录 scrapy框架的日志等级和请求传参, 优化效率 Scrapy的日志等级 请求传参 如何提高scripy的爬取效率 scrapy框架的日志等级和请求传参, 优化效率 Scrapy的日志等级 在使 ...

  4. 团体程序设计天梯赛-练习集L1-006. *连续因子

    L1-006. 连续因子 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一个正整数N的因子中可能存在若干连续的数字.例如630 ...

  5. MINSUB - Largest Submatrix

    MINSUB - Largest Submatrix no tags  You are given an matrix M (consisting of nonnegative integers) a ...

  6. 清北学堂模拟赛d1t4 一道图论好题(graph)

    题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,不仅有边权还有点权. LYK给出了一个子图的定义,一张图G’={V’,E’}被称作G的子图,当且仅当 ·G ...

  7. Jquery书写ajax

    根据API学习本章 Jquery书写ajax 使用ajax发送表单到servlet,发送时显示等待图片,servlet处理完返回信息,在页面显示返回信息,并且隐藏等待图片 <%@ page la ...

  8. Linux下diff与patch命令的配合使用

    在Linux下,diff与patch命令配合使用可以进行简单的代码维护工作. [A] diff diff命令用于比较文件的差异,可以用于制作patch文件.但此命令参数众多.格式多样,所以在此仅介绍较 ...

  9. java debug jdk(转载)

    Debug info unavailable 解决之道 从事Java的小伙伴们估计都有断点代码的习惯,可以很方便的查看运行期代码中一些变量的值. 但是JDK中有些类你会发现是无法断点的,即使你在IDE ...

  10. Windows安装php Oracle扩展

    前言 去IOE的浪潮下,很多大型公司古董级的系统还在使用IOE设备.新东家有些年头的系统都是使用Oracle数据库,为了省事,新架构下的业务直接通过编程语言API操作Oracle数据库,安装相关扩展对 ...