说在前面

  最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用了这个插件。在使用的过程中发现中文的相关文档较少,说多了都是泪,硬着头皮看官方的网站,本来英文不咋地,只能边查单词边用了,于是就有了这篇文章,主要是总结在使用Dropzone中的遇到的一些问题及详细的使用步骤。

Dropzone.js是啥?

  Dropzone.js是一个开源库,提供拖放文件上传及图像预览。它是轻量级的,不依赖于任何其他库(如jQuery),并且是高度可定制的,官网在这里。首先说在前面的是因为这是一个基于Html APIs的插件,所以有下列浏览器支持:

  • Chrome 7+
  • Firefox 4+
  • IE 10+
  • Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
  • Safari 6+

  注意:如果您的客户还在使用IE10以下的浏览器,那可能这篇文章不太适合您,或者您可以说服客户放弃使用IE,可能获得不一样的体验。

效果图

  直接上几张效果图,大家先看看是否符合您的要求,再决定是否使用。

  

  

  

如何下载?

  官网提供的js下载,在这里,这仅仅是一个js,不包括相关的样式、图片等,所以建议从Github上下载完整的包,地址在这里。下载这个项目最简单的方法是使用右侧的Download ZIP,会自动将所有文件打包成zip格式的文件下载下来,里面的downloads文件夹就是我们需要的,包括需要用到的js、图片、css等文件。

如何使用?

  dropzone官网提供了Demo,但是Demo中没有实现一次上传多张图片的功能,而且也没有提供服务器端C#的相关代码。所以我就把使用的步骤总结了一下,方便以后的复用。在这里我把使用方法分为前端和后端的代码,前端主要是文件的引用、dropzone初始化、以及相关的属性事件说明。后端就是指MVC中Action了,主要功能是从Request获取文件,存放到服务器中。下面让我细细道来。

前端

   1、引用文件

  首先呢,肯定是先把下载的文件分类放到自己的项目中,这样便于以后的管理,也符合国际惯例。

  然后就需要在页面中引用,引用的代码如下:

//样式文件
<link href="~/Content/css/dropzone.css" rel="stylesheet" />

//jQuery文件,不是必需的
<script src="~/Scripts/jquery-1.8.2.min.js"></script>

//js文件
<script src="~/Scripts/dropzone.js"></script>

  大家看到我引用了三个文件,其中jQuery的文件不是必需的,因为在文章开头也介绍过dropzone是独立的库,不需要依赖jQuery,我为了操作方便,所以在这里引用了一下,看个人选择了。

  2、建立表单元素  

<!--class="dropzone" 使用dropzone自带的样式 样式在引用的CSS中-->
<form action="/"
    class="dropzone"
    enctype="multipart/form-data"
    id="my-dropzone"
    method="post">
    <!--上传图片时,需要同时提交的数据,这里做个演示-->
    @Html.Hidden("hidAlbumId")
</form>
<div>
    <!--上传按钮,提供多张图片一次性上传的功能-->
    <button type="submit" id="submit-all" disabled="disabled">上传</button>
</div>

  3、初始化Dropzone,并添加属性和事件

<script>
        //Dropzone的初始化,myDropzone为form的id
        Dropzone.options.myDropzone = {

            //指定上传图片的路径
            url: "@Url.Action("BatchUpload", "PhotoUpload")",

            //添加上传取消和删除预览图片的链接,默认不添加
            addRemoveLinks: true,

            //关闭自动上传功能,默认会true会自动上传
            //也就是添加一张图片向服务器发送一次请求
            autoProcessQueue: false,

            //允许上传多个照片
            uploadMultiple: true,

            //每次上传的最多文件数,经测试默认为2,坑啊
            //记得修改web.config 限制上传文件大小的节
            parallelUploads: 100,

            init: function () {
                var submitButton = document.querySelector("#submit-all")
                myDropzone = this; // closure

                //为上传按钮添加点击事件
                submitButton.addEventListener("click", function () {
                    //手动上传所有图片
                    myDropzone.processQueue();
                });

                //当添加图片后的事件,上传按钮恢复可用
                this.on("addedfile", function () {
                    $("#submit-all").removeAttr("disabled");
                });

                //当上传完成后的事件,接受的数据为JSON格式
                this.on("complete", function (data) {
                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                        var res = eval('(' + data.xhr.responseText + ')');
                        var msg;
                        if (res.Result) {
                            msg = "恭喜,已成功上传" + res.Count + "张照片!";
                        }
                        else {
                            msg = "上传失败,失败的原因是:" + res.Message;
                        }
                        $("#message").text(msg);
                        $("#dialog").dialog("open");
                    }
                });

                //删除图片的事件,当上传的图片为空时,使上传按钮不可用状态
                this.on("removedfile", function () {
                    if (this.getAcceptedFiles().length === 0) {
                        $("#submit-all").attr("disabled", true);
                    }
                });
            }
        };
</script>

  这样前端的工作基本完成了,下面来看看后端的工作。

★后端

  后端的功能挺简单,就是接收文件,然后将数据保存到服务器上,并返回JSON数据。代码如下:

[HttpPost]
public ActionResult BatchUpload()
{
    bool isSavedSuccessfully = true;
    ;
    string msg = "";

    string fileName = "";
    string fileExtension = "";
    string filePath = "";
    string fileNewName = "";

    //这里是获取隐藏域中的数据
    //int albumId = string.IsNullOrEmpty(Request.Params["hidAlbumId"]) ?
    //    0 : int.Parse(Request.Params["hidAlbumId"]);

    try
    {
        string directoryPath = Server.MapPath("~/Content/photos");
        if (!Directory.Exists(directoryPath))
            Directory.CreateDirectory(directoryPath);

        foreach (string f in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[f];

            )
            {
                fileName = file.FileName;
                fileExtension = Path.GetExtension(fileName);
                fileNewName = Guid.NewGuid().ToString() + fileExtension;
                filePath = Path.Combine(directoryPath, fileNewName);
                file.SaveAs(filePath);

                count++;
            }
        }
    }
    catch (Exception ex)
    {
        msg = ex.Message;
        isSavedSuccessfully = false;
    }

    return Json(new
    {
        Result = isSavedSuccessfully,
        Count = count,
        Message = msg
    });
}

总结

  通过这次实践,刚发现Html APIs的强大,Dropzone就是通过调用APIs实现的功能,现在自己的技术从各个方面来说已经落后很多了,以后得抓紧自己的业余时间,多做些个人项目,才能在实践中不断提高。由于自己对相关技术理解不深,文中必有疏漏,还请大家批评指正。

参考

  http://www.dropzonejs.com/

  http://www.dropzonejs.com/bootstrap.html

  http://stackoverflow.com/questions/18059128/dropzone-js-uploads-only-two-files-when-autoprocessqueue-set-to-false

  http://stackoverflow.com/questions/18048825/how-to-limit-the-number-of-dropzone-js-files-uploaded

  http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/

  http://stackoverflow.com/questions/16050965/using-dropzone-js-in-asp-net

  https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button

ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传的更多相关文章

  1. 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  2. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  3. DropzoneJS 可以拖拽上传的js库

    介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload   http://blueimp.github.io/jQu ...

  4. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  5. 在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示

    使用typeahead.js可以实现预先输入,即智能提示,本篇在ASP.NET MVC下实现.实现效果如下: 首先是有关城市的模型. public class City { public int Id ...

  6. ASP.NET MVC 中单独的JS文件中获取Controller中设定的值

    1,在Controller中的Action 中将指定值写上.       //       // GET: /Home/       public ActionResult Index()       ...

  7. 在Asp.Net MVC 中如何用JS访问Web.Config中appSettings的值

    应用场景: 很多时候我们要在Web.Config中添加appSettings的键值对来标识一些全局的信息,比如:调用service的domain,跳转其他网站页面的url 等等: 那么此时就涉及到了一 ...

  8. Asp.net Mvc中利用ValidationAttribute实现xss过滤

    在网站开发中,需要注意的一个问题就是防范XSS攻击,Asp.net mvc中已经自动为我们提供了这个功能.用户提交数据时时,在生成Action参数的过程中asp.net会对用户提交的数据进行验证,一旦 ...

  9. 学习MVC之租房网站(七)-房源管理和配图上传

    在上一篇<学习MVC之租房网站(六)-用户登录和权限控制>完成了后台用户登录和权限控制功能的开发,接下来要完成的是房源的管理,用户在后台新增.编辑房源信息,供前台用户操作. 一 房源管理 ...

随机推荐

  1. [BZOJ2656][codevs1207][Zjoi2012]数列(sequence)

    [BZOJ2656][codevs1207][Zjoi2012]数列(sequence) 试题描述 小白和小蓝在一起上数学课,下课后老师留了一道作业,求下面这个数列的通项公式: 小白作为一个数学爱好者 ...

  2. 常用iOS的第三方框架

    图像:1.图片浏览控件MWPhotoBrowser       实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等 ...

  3. Java 并发和多线程(一) Java并发性和多线程介绍[转]

    作者:Jakob Jenkov 译者:Simon-SZ  校对:方腾飞 http://tutorials.jenkov.com/java-concurrency/index.html 在过去单CPU时 ...

  4. memcached与.NET的融合使用(二)

    memcached部署完成之后,对当前缓存中数据的监控就显得比较迫切,这里看到网上开源的memadmin比较小巧好用,决定用它来查看监控memcached. 下载memadmin1.0.11,地址:h ...

  5. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. PHP学习之数组的定义和填充

    数组就是把一组数据按顺序放在一起.PHP的数组和其它的语言数组有一点点不同:第一,保存的数据是可以是任何类型的:第二,数组的索引可以是数字,也可以是字符串. PHP的数组,说白了,就是关联数据每一条数 ...

  7. m个苹果放在n个筐里,每个筐至少一个,所有的筐都一样,有多少种放法

    package com.study; import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...

  8. Linux日志文件系统(EXT4、XFS、JFS)及性能分析

    Ext4 ReiserFS Btrfs 等七种文件系统性能比拼 自上一篇<Ext2 v.s. Ext3 v.s. Ext4 性能比拼> 发布以来,社会各界纷纷来电来函,给出了“Ext4 我 ...

  9. react连连看

      // Math.floor(t * Math.random()); var isInclude = function (array, element) { let alen = array.len ...

  10. java正则表达式的忽略大小写

    (?i)abc 表示abc都忽略大小写  a(?i)bc 表示bc忽略大小写  a((?i)b)c 表示只有b忽略大小写