MVC异步上传图片到本地/服务器
这两天朋友问我,有没有异步上传图片到本地/服务器这种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异步上传图片到本地/服务器的更多相关文章
- kindeditor修改图片上传路径-使用webapi上传图片到图片服务器
kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- 使用Ajax异步上传图片的方法(html,javascript,php)
前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...
- Ajax实现异步上传图片
要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- mvc异步表单遇到的问题
1,mvc异步表单遇到的问题 问题:使用jqury easy ui 时提交异步数据不能请求到服务器 解决办法:经过细心调试和检测,发现jqury的加载顺序放在了easy ui之后,所以首先加 ...
- asp.net mvc异步查询
对于asp.net mvc异步查询 如何做MVC异步查询,做列表页面. 查询是项目中必不可少的工作,而且不同的项目不同的团队,都有自己的简单方法.Asp.net mvc 有自己独特的优势,下面是结合m ...
随机推荐
- (1)搜索广告CTR预估
https://www.cnblogs.com/futurehau/p/6181008.html 一.广告投放系统 广告系统包含多个子系统.除了上图所示的广告投放系统外,还包含商业系统(广告库的获得) ...
- POJ-2135-Farm Tour(最大费用最小流)模板
Farm Tour POJ - 2135 When FJ's friends visit him on the farm, he likes to show them around. His farm ...
- win10下VMware Workstation 14运行虚拟机黑屏
最新 升级电脑Win10自动升级后,在打开虚拟机后,很卡,且出现黑屏,但是挂起后仍能显示锁屏界面,网上就一顿搜.下面放解决方法. 管理员运行 netsh winsock reset 帮你解决一切烦恼. ...
- 转:Windows Phone 7 设计简介
英文原文:smashingmagazine 导读:Windows Phone 7 引进了一个全新的内容管理和用户界面,命名为Metro的设计语言和理论.微软这次所看准的市场和用户群也与之前的老一代 W ...
- SGC强制最低128位加密,公钥支持ECC加密算法的SSL证书
Pro SSL证书,验证企业域名所有权和企业身份信息,采用SGC(服务器门控)技术强制128位以上至256位加密,属于企业OV验证级专业版(Pro) SSL证书:即使用户使用低版本浏览器(比如浏览 ...
- 51nod挑的部分5级题
最近心情不好所以写代码来获得快落 4级题有点难做?然后就开始挑简单的5级题开始写 然后准备记录一些自己没有做出来 参考讨论区或者博客才做出来的题目 51nod_1189 阶乘分数 这个题参考了讨论区 ...
- c++ primer 第三章 标准库类型
1. string 标准库 1.1初始化 string s1; 默认构造函数s1为空 string s2(s1); 将s2初始化为s1的一个副本 string s3("value" ...
- 完全卸载SQL Server 2008 R2(转)
系统:Windows 10 以下方法转自:http://www.cnblogs.com/qanholas/p/3804123.html 1.在控制面板卸载Miscrosoft SQL Server 2 ...
- Mac下OpenCV开发
1. 环境搭建 a) 安装Homebrew i. 下载地址:http://github.com/mxcl/homebrew/tarball/maste ...
- firedac数据集和字符串相互转换
uses Data.FireDACJSONReflect 1)FIREDAC数据库序列为字符串,进行了加压和BASE64编码 function DataSetToString(const ADataS ...