Dropzone的JS文件需要自己到官网下载下 http://www.dropzonejs.com/,上面也有demo及API，
官网上的 demo是MVC版的并且自动上传的，这里给修改成点击按钮提交上传，也给改成支持一般处理程序了，由于项目需要。。没办法。
各种配置属性这里不一一介绍了，应该都能看懂官网上也有说明，需要改的小伙伴自己查一下吧。不废话了直接上代码及Demo
前端代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<link href="/Scripts/dropzone/css/basic.css" rel="stylesheet" />
<link href="/Scripts/dropzone/css/dropzone.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
<title>bbb</title>
</head>
<body>
<div class="jumbotron">
<form action="~/Home/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<input type="but" value="Upload1111111111111111111" id="bu" />
</form>
</div>
<style type="text/css">
.dz-max-files-reached {
background-color: red;
}
</style>
</body>
</html>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="~/Scripts/dropzone/dropzone.js"></script>
<script type="text/javascript">
////File Upload response from the server
//Dropzone.options.dropzoneForm = {
// maxFiles: 5,//数量
// maxFilesize: 10,//大小
// autoProcessQueue:true,
// init: function () {
// //当数量到达最大时候调用
// this.on("maxfilesexceeded", function (data) {
// var res = eval(‘(‘ + data.xhr.responseText + ‘)‘);
// });
// //在每个文件上添加按钮
// this.on("addedfile", function (file) {
// // Create the remove button
// var removeButton = Dropzone.createElement("<button>Remove file</button>");
// // Capture the Dropzone instance as closure.
// var _this = this;
// // Listen to the click event
// removeButton.addEventListener("click", function (e) {
// // Make sure the button click doesn‘t submit the form:
// e.preventDefault();
// e.stopPropagation();
// // Remove the file preview.
// _this.removeFile(file);
// // If you want to the delete the file on the server as well,
// // you can do the AJAX request here.
// });
// // Add the button to the file preview element.
// file.previewElement.appendChild(removeButton);
// });
// }
$("#dropzoneForm").dropzone({
url: "/yns/Up.ashx",
addRemoveLinks: true,
dictDefaultMessage: "拖拽文件到此处",
dictRemoveFile: "x",
dictCancelUpload: "x",
parallelUploads:5,
maxFiles: 10,
maxFilesize: 5,
acceptedFiles: ".js,.jpg,.jpge,.doc,.xlsx",
init: function () {
this.on("success", function (file) {
console.log("File " + file.name + "uploaded");
});
var y = this;
this.on("removedfile", function (file) {
console.log("File " + file.name + "Remove");
});
$("#bu").click(function () {
y.processQueue();
});
}
});
</script>
后台MVC代码
public ActionResult SaveUploadedFile()
{
bool isSavedSuccessfully = true;
string fName = "";
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
//Save file content goes here
fName = file.FileName;
if (file != null && file.ContentLength > 0)
{
var originalDirectory = new DirectoryInfo(string.Format("{0}Content", Server.MapPath(@"\")));
string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");
var fileName1 = Path.GetFileName(file.FileName);
bool isExists = System.IO.Directory.Exists(pathString);
if (!isExists)
System.IO.Directory.CreateDirectory(pathString);
var path = string.Format("{0}\\{1}", pathString, file.FileName);
file.SaveAs(path);
}
}
if (isSavedSuccessfully)
{
return Json(new { Message = fName });
}
else
{
return Json(new { Message = "Error in saving file" });
}
}
public ActionResult bbb()
{
return View();
}
一般处理程序代码
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace WebApplication1.yns
{
/// <summary>
/// Up 的摘要说明
/// </summary>
public class Up : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string fName = "";
foreach (string fileName in context.Request.Files)
{
HttpPostedFile file = context.Request.Files[fileName];
fName = file.FileName;
if (file != null && file.ContentLength > 0)
{
//路径
var originalDirectory = new DirectoryInfo(string.Format("{0}Content", System.Web.HttpContext.Current.Server.MapPath(@"\")));
//合并地址
string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "UploadFiles");
var fileName1 = Path.GetFileName(file.FileName);//文件名与扩展名
int bytes = file.ContentLength;//获取文件的字节大小
if (bytes > 1024 * 1024)
ResponseWriteEnd(context, "3"); //图片不能大于1M
//判断地址是否存在，不存在则创建
bool isExists = System.IO.Directory.Exists(pathString);
if (!isExists)
System.IO.Directory.CreateDirectory(pathString);
var path = string.Format("{0}\\{1}", pathString, file.FileName);
//保存
file.SaveAs(path);
}else
{
ResponseWriteEnd(context, "4");//请选择要上传的文件
}
}
ResponseWriteEnd(context, "1"); //上传成功
}
private void ResponseWriteEnd(HttpContext context, string msg)
{
context.Response.Write(msg);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
由于时间关系比较着急，后来也懒的整理了，demo弄的有点low，大家体谅。。。DEMO链接是百度网盘的，不知道会不会过期。。
http://pan.baidu.com/s/1eSEfVLw
时间： 2024-11-06 09:26:47