markdown 如何使用dropzone js上传文件

Posted 2021-05-06

http://www.dropzonejs.com/

### Template

```html
<div class="col-md-6">
    <div class="drop flex flex-column">
        <div class="text-center p text-muted drop-guide">
            <span>Click to browser files or drag 'n drop files here (1MB/file)</span>
        </div>
        <div class="zone flex-item" id="dropzone">
            <div class="fallback">
                <div id="preview-template" style="display: none;">
                    <div class="dz-preview dz-file-preview">
                        <div class="dz-details">
                            <div class="dz-size" data-dz-size=""></div>
                            <img data-dz-thumbnail="">
                        </div>
                        <a href="#" class="remove-dz-file remove-file" data-dz-remove>@Icon.fa("times")</a>
                    </div>
                    @Html.TextBoxFor(m => m.PostedFiles, new { type = "file", @class = "form-control", multiple = "multiple" })
                </div>
            </div>
        </div>
    </div>
</div>
```

### Setup

```js
/**
 * setup dropzone
 */
Dropzone.options.formProduct = {
    paramName: "PostedFiles", // The name that will be used to transfer the file
    maxFilesize: 1, // MB
    maxThumbnailFilesize: 1,
    maxFiles: 20,
    clickable: '#dropzone',
    acceptedFiles: 'image/*',
    //accept: function (file, done) {            
    //    else { done(); }
    //},
    init: function () {
        var self = this;

        self.on('dragenter', function (e) {
            $('#dropzone').addClass('hover');
        });

        self.on('dragleave', function (e) {
            e.stopPropagation();
            $('#dropzone').removeClass('hover');
        });

        self.on('drop', function (e) {
            $('#dropzone').removeClass('hover');
        });

        self.on("maxfilesexceeded", function (file) {
            self.removeAllFiles();
            self.addFile(file);
        });

        self.on("maxfilesreached", function (file) {
            // self.removeAllFiles();
            // self.addFile(file);
        });

        self.on('error', function (file) {

            if (file.size > 1000000) {
                toastr.error('max size is 1MB');
            }

            $('#dropzone').find('.dz-preview.dz-error').remove();
        });

        self.on('addedfile', function (file) {

        });

    },
    previewTemplate: document.getElementById('preview-template').innerHTML,
    previewsContainer: '#dropzone',
    uploadMultiple: false,
    autoProcessQueue: false,
};
```

### Handle client submit

```js
/**
 * form submit handle
 */
form.on('submit', function (e) {
    var $form = $(e.target);

    var formData = new FormData();
    var dropzone = Dropzone.forElement("#form-product");

    var elements = $form.serializeArray();
    var length = elements.length;

    // convert from serialized data to form data
    for (var i = 0; i < length; i++) {
        var element = elements[i];
        formData.append(element.name, element.value);
    }

    // append droped files
    if (dropzone.files.length > 0) {
        var acceptedFiles = _.filter(dropzone.files, function (f) { return f.accepted; });
        var acceptedLen = acceptedFiles.length;

        for (var i = 0; i < acceptedLen; i++) {
            formData.append('PostedFile' + i, acceptedFiles[i]);
        }
    }

    // append another data

    // post to server
    var req = $.ajax({
        url: $form.attr('action'),
        data: formData,
        method: 'post',
        contentType: false,
        processData: false
    });

    req.then(function (json) {
        // success handler
    }, function (xhr) {
        // error handler
    });
});
```

### Server handler

```cs
// todo: upload multiple images
if (Request.Files != null && Request.Files.Count > 0)
{
    foreach (string filename in Request.Files)
    {
        var postedFile = Request.Files[filename];
        var upload = postedFile.Copy();
        if (upload != null)
        {
            hasUpload = true;
            upload.OwnerId = product.Id;
            upload.OwnerType = UploadTypes.Product;
            _uploadRepo.Create(upload);

            postedFile?.SaveAs(Server.MapPath(Url.Content("~/Uploads/" + upload.Filename)));
        }

    }

    //if (hasUpload)
    //    _unit.SaveChanges();
}
```