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