在nuget控制台输入:Install-Package dropzone

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/dropzone/dropzone.min.css" rel="stylesheet" />
<script src="~/Scripts/dropzone/dropzone.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="row"> <div class="col-md-9 text-right"></div>
</div>
</header>
<div class="row main" style="min-height:500px">
<div class="col-md-12"> <div class="row" style="margin-top:30px;">
<div class="col-md-3 col-xs-12 col-md-offset-3">
@*<form id="mydropzone" action="/sss/upload" class="dropzone"></form>*@
<div id="mydropzone" class="dropzone"></div>
</div>
</div>
</div>
</div> <footer> </footer>
</div> <script>
var myDropzone = new Dropzone("div#mydropzone", {
url: "@Url.Action("update","controller")",
paramName: "file",
maxFilesize: 100, // MB
maxFiles: 5,
acceptedFiles: ".jpg,.png,.gif",
success: function (data) {
alert(data);
},
dictDefaultMessage: "点击上传图片",
dictInvalidInputType: "请选择格式为jpg,png,gif格式的图片", addRemoveLinks: true,
dictRemoveFile: "移 除",
init: function () { this.on("removedfile", function (file) {
debugger;
$.ajax({
type:"post",
url:"/sss/delete",
data:JSON.stringify({ id: file.name }),
contentType:"application/json;charset=utf-8",
success: function (data) {
if (data > 1)
{
alert("删除成功!!");
}
} }); });
} });
</script>
</body>
</html>

  

 public class sssController : Controller
{ public string path;
// GET: sss
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult upload() {
HttpFileCollectionBase coll = Request.Files;
string fileName = "";
string fileExtension = "";
string filePath = ""; foreach (string item in coll)
{
HttpPostedFileBase file = Request.Files[item];
if (file != null && file.ContentLength > 0)
{
fileName = file.FileName;
fileExtension = Path.GetExtension(fileName);
filePath =Server.MapPath("/Content/photo/")+fileName;
path = filePath;
file.SaveAs(filePath);
}
}
return Json("ok");
}
[HttpPost]
public ActionResult delete(string id)
{
string filePath = Path.Combine(Server.MapPath("/Content/photo"), id);
int res = 0;
if (System.IO.File.Exists(filePath))
{
System.IO.File.Delete(filePath);
res = 10;
}
return Json(res); }
}

  

.NET MVC Dropzone 上传图片的更多相关文章

  1. spring mvc 的上传图片是怎么实现的?

    spring mvc 的上传图片是怎么实现的? 导入jar包,commons-io.jar 及 commons-fileupload.jar 在springmvc的配置文件中配置Mutipart解析器 ...

  2. mvc实现上传图片(上传和预览)webuploader

    笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下载 ...

  3. ASP.NET MVC 4 - 上传图片到数据库

    这里演示如何在MVC WEB应用程序如何上传图片到数据库以及如何在WEB页面上显示图片.数据库表对应整个Model类,不单图片数据一个字段,我们从数据表的定义开始: CREATE TABLE [dbo ...

  4. MVC异步上传图片到本地/服务器

    这两天朋友问我,有没有异步上传图片到本地/服务器这种demo,他有用, 我就想,好吧, 那刚好周末了,整理一套出来. 主要用到的是jquery uploadify 这个juqery的插件 ,可以无刷新 ...

  5. 使用Dropzone上传图片及回显演示样例

    一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...

  6. MVC ajaxSubmit上传图片

    注意事项: 1.提交form,必须引用jquery.form.min.js 2.不要使用mvc自带的Ajax.Form() 1.页面cshtml <form name="frmInpu ...

  7. jquery.uploadify+spring mvc实现上传图片

    一.前端页面 1.下载jquery.uploadify 去uploadify官网(http://www.uploadify.com/download/)下载压缩包,解压后放在如下路径: 2.html结 ...

  8. MVC实现上传图片的方法

    Form提交时,须注意form需要添加属性enctype="multipart/form-data",否则Request.Files.Count=0,无法上传图片. cshtml代 ...

  9. mvc中上传图片到指定文件夹中

    前台: @using (Html.BeginForm("AddImg", "UpFileImg", FormMethod.Post, new { enctype ...

随机推荐

  1. Poj Maya Calendar

    http://poj.org/problem?id=1008 Maya Calendar Time Limit: 1000MS Memory Limit: 10000K Total Submissio ...

  2. 转载:关于 python ImportError: No module named 的问题

    关于 python ImportError: No module named 的问题 今天在 centos 下安装 python setup.py install 时报错:ImportError: N ...

  3. In-Out Parameters inout keyword

    You write an in-out parameter by placing the inout keyword right before a parameter’s type. An in-ou ...

  4. PuTTY 命令行改进 有效解决 中文乱码

    PuTTY  是一个免费且跨平台的并支持SSH和Telnet 的客户端, 包括xterm 终端模拟器. 它由Simon Tatham 编写并维护. http://www.chiark.greenend ...

  5. HDU 1164 Eddy's research I( 试除法 & 筛法改造试除法 分解整数 )

    链接:传送门 题意:给出一个整数 n ,输出整数 n 的分解成若干个素因子的方案 思路:经典的整数分解题目,这里采用试除法 和 用筛法改造后的试除法 对正整数 n 进行分解 方法一:试除法对正整数 n ...

  6. 兼容IE的两端对齐

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  7. [HEOI2013]Eden 的新背包问题

    数据极水,不加优化的多重背包都能过...早知道考试的时候不加奇奇怪怪的卡常优化,卡了45分... 就是从前往后做一个多重背包,从后往前再做一个,问的时候就暴力求一下跳过这个的最佳方案... #incl ...

  8. 转[总结]FFMPEG视音频编解码零基础学习方法 .

    http://blog.csdn.net/leixiaohua1020/article/details/15811977 在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视 ...

  9. 【hiho一下第十二周】刷油漆

    [题目链接]:http://hihocoder.com/problemset/problem/1055 [题意] [题解] 设f[x][i]表示以第x个节点为根的子树; 不选x这个节点,然后子树里面选 ...

  10. redis-ubuntu环境下安装

    ubuntu环境下联网安装 进去系统后,首先修改root的密码 命令 sudo passwd 设置新的密码:XXX 切换为root操作 $ wget http://download.redis.io/ ...