深入了解dropzone.js

发布时间：2023-05-20

一、dropzone.js input type=file

Dropzone.js是一个开源的、具有可扩展性的、美观并且简单易用的前端文件上传库。使用Dropzone.js可以通过简单的配置轻松实现文件上传功能。通过使用Dropzone的<input type=file>元素，可以让用户选择文件并进行上传。下面是一个简单的演示示例：

<form action="/file-upload" class="dropzone"></form>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<!-- or just use this: <script src="/path/to/dropzone.js"></script> -->

二、dropzone.js 修改headers

Dropzone.js允许我们通过xhrFields选项轻松地修改XMLHttpRequest对象的默认设置，从而实现自定义header的添加，在文件上传过程中可以携带自定义header的值进行传递。更改XMLHttpRequest默认设置的方式如下所示：

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone");
myDropzone.on("sending", function(file, xhr, formData) {
    xhr.setRequestHeader('my-custom-header', 'header-value');
});

三、dropzone.js mvc c#

Dropzone.js和ASP.NET MVC一起使用非常方便和简单。我们可以通过定义一个Controller类，然后在其中定义与文件上传相关的action方法来自定义控制器的行为。

[HttpPost]
public JsonResult UploadFile(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
        file.SaveAs(filePath);
        return Json(new { success = true });
    }
    return Json(new { success = false });
}

然后在Dropzone.js配置文件中，我们只需要指定这个action方法的URL：

Dropzone.options.myDropzone = {
    url: "/MyController/UploadFile"
};

四、dropzone.js例程

Dropzone.js具有一些很棒的例子，可以在其中展示Dropzone.js的不同特性和用例。访问它们的方式很简单，只需要转到Dropzone网站的示例页面 https://www.dropzonejs.com/examples.html。下面是一个演示Dropzone的简单示例：

<form action="/" id="my-awesome-dropzone" class="dropzone">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<script>
    Dropzone.options.myAwesomeDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        addRemoveLinks: true,
        dictDefaultMessage: '拖拽文件到此上传或点击上传',
        dictRemoveFile: '删除',
        dictCancelUploadConfirmation: '确定取消上传吗？',
        accept: function(file, done) {
            if (file.type != "image/jpeg" && file.type != "image/png") {
                done("请上传jpg或png格式的图片");
            }
            else { done(); }
        }
    };
</script>

五、dropzone.js传递参数

Dropzone.js允许我们在HTTP POST请求中添加任意自定义参数。我们可以通过Dropzone的params选项来添加multipart/form-data POST参数。添加自定义参数的方式非常简单，只需要在Dropzone配置文件中的params中定义即可。

// Define the url to send the message to
var url = '/file-upload';
// Set up any event handlers
Dropzone.options.myDropzone = {
    url: url,
    params: {
        exampleParameter: 'exampleValue'
    }
};
// Get dropzone instance
var myDropzone = Dropzone.forElement("#my-dropzone");
// Get URL
var url = myDropzone.options.url;
// Get parameter value
var exampleValue = myDropzone.options.params.exampleParameter;

六、dropzone.js初始化

为了使用Dropzone.js，我们需要把Dropzone.js添加到我们的代码中，然后在合适的DOM元素上调用Dropzone()构造函数。初始化完毕后，Dropzone会触发一系列事件来处理文件上传。以下是初始化Dropzone的简单示例：

<form action="/" class="dropzone needsclick" id="demo-dropzone"></form>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<script>
    // Disable auto discover for all elements:
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#demo-dropzone", { /* options */ });
</script>

七、dropzone.js razor

Dropzone.js和Razor可以很容易地集成。Razor可以使用C#语言或其他.NET编程语言来创建动态Web页面。在下面的示例中，我们使用Razor来集成Dropzone.js并创建一个表单，在表单中使用Dropzone来上传文件。

@using (Html.BeginForm("UploadFiles", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", @id = "dropzoneForm" }))
{
    <div class="fallback">
        <input name="file" type="file" multiple="multiple" />
    </div>
}
<script src="//cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>

八、dropzone.js flask

Flask是Python语言的一个轻量级Web框架。Flask框架和Dropzone.js结合起来使用非常简单，只需要定义一个路由，然后使用request对象来收集表单数据和文件信息即可。

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return 'file uploaded!'
    return render_template('upload.html')

以上示例定义了一个/upload路由，用于处理文件上传，并将文件保存在服务器上。下面是一个简单的HTML模板，用于将文件上传到服务器上：

<form action="/upload" method="post" class="dropzone">
</form>

九、dropzone.js回显图片选取

Dropzone.js允许我们在文件上传之后在Web页面上预览文件。我们可以在Dropzone上设置一个预览图片的容器，这样就可以在上传文件之后很容易地看到预览图片。下面是一个简单的演示示例：

<div id="my-dropzone"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<script>
    Dropzone.options.myDropzone = {
        success: function(file, response){
            if(file.type.match(/image.*/)){
                var img = document.createElement("img");
                img.src = response;
                img.alt = file.name;
                img.width = 250;
                this.element.appendChild(img);
            }
        }
    };
</script>

总结

Dropzone.js是一个非常好用的文件上传库，它包含了非常丰富的API和组件，可以帮助我们快速创建一个美观、安全、高效的文件上传功能，而且使用起来非常简单。但是，文章中所介绍的只是其中一小部分功能，如果要深入了解它，还需要自行到Dropzone.js官网查看文档和例子。

推荐文章