深入了解dropzone.js

一、dropzone.js input type=file

Dropzone.js是一個開源的、具有可擴展性的、美觀並且簡單易用的前端文件上傳庫。使用Dropzone.js可以通過簡單的配置輕鬆實現文件上傳功能。通過使用Dropzone的元素，可以讓用戶選擇文件並進行上傳。下面是一個簡單的演示示例：

    <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官網查看文檔和例子。