C#使用Dropzone.js上传图片

---

今天遇到一个需求，需要上传多张图片。就寻思着找个javascript插件。找了很多个插件。最后选定了dropzone.js。其他的不说，因为官方文档很全。就说说我遇到的问题吧。
就像官网文档说的那样。dropzone.js可以单独使用，也可以放在已有的表单中。但在表单提交的时候，如果dropzone里面的文件没有变化，调用Dropzone.processQueue()是无法提交的。

引入dropzone.js

<script src="../jscript/dropzone/dropzone.min.js"></script>

可以根据需要引入官方的样式文件。也可以自己控制样式

<link href="../jscript/dropzone/dropzone.min.css" rel="stylesheet" />

我们把dropzone放到表单中

<form id="form" method="post" enctype="multipart/form-data" action="">    <div id="mydropzone" class="dropzone"></div></form>

我们可以用jquery的方式对dropzone进行初始化，并进行一定配置。

$("#mydropzone").dropzone({            url: '提交的地址',            maxFilesize: 0.1,    //限制上传文件的大小            maxFiles: 3,    //限制上传文件的个数            acceptedFiles: '.jpg,.png',    //限制上传文件的类型            addRemoveLinks: true,    //是否显示移除按钮            uploadMultiple: true,    //是否允许多个文件上传            dictDefaultMessage: '选择照片',            dictFileTooBig: '文件过大',            dictRemoveFile: '移除',            autoProcessQueue: false,    //时候自动处理文件上传            dictDefaultMessage: '请选择要上传的照片',            init: function () {                });                myDropzone.on("removedfile", function (file) {                  //移除文件所进行的操作                });                myDropzone.on("success", function (file) {                  //文件上传成功所进行的操作                });            }        });

上面进行了基本的配置。在用户没有修改dropzone里面的文件，只修改表单其他数据就提交时，我们只需要根据getAcceptedFiles()判断一下就可以了，代码如下

init: function () {                var myDropzone = this;                $("#btnSave").click(function (e) {                    e.preventDefault();                    e.stopPropagation();                    if (myDropzone.getAcceptedFiles().length > 0) {                        myDropzone.processQueue();                    }                    else {                        $.ajax({                            url: '提交地址',                            type: 'POST',                            dataType: 'html',                            data: $("#form").serialize(),                            success: function (data) {                                HDialog.Info("保存成功!");                            }                        })                    }                });            }

如果我们单独使用dropzone，不放在表单中，可以这样用

init: function () {                var myDropzone = this;                $("#btnSave").click(function (e) {                    e.preventDefault();                    e.stopPropagation();                    if (myDropzone.getAcceptedFiles().length > 0) {                        myDropzone.processQueue();                    }                    else {                    myDropzone.uploadFiles([]);                    }                });            }

这样即使用户没有修改文件，也会通过ajax进行表单提交。注意：这个提交在后台时不能获取到文件的。因为dropzone不能提交模拟文件。但是这样已经足够了，不是吗。

如果我们需要在调用Dropzone.processQueue()的同时，需要提交表单其他数据，可以这样用。

sending: function (file, xhr, formData) {                if (formData.get("AID") == null) {                    formData.append("AID", $('#AID').val());                }                if (formData.get("Names") == null) {                    formData.append("Names", $('#Names').val());                }                if (formData.get("TeamPresentation") == null) {                    formData.append("TeamPresentation", $('#TeamPresentation').val());                }            }

如果我们需要显示服务器上已经有的文件，例如图片，可以这样使用。

init: function () {                var myDropzone = this;                $.get('服务器文件地址', function (data) {                    $.each(eval(data), function (key, value) {                            var mockFile = { name: value.name, size: value.size, status:                   Dropzone.ACCEPTED };                        myDropzone.options.addedfile.call(myDropzone, mockFile);                        myDropzone.options.thumbnail.call(myDropzone, mockFile, value.name);                        myDropzone.emit("complete", mockFile);                    });                });            }

就这样吧，结束了。