人人IT網

人人IT網

當前位置: 主頁 > JAVA編程 > JAVA >

dropzone的使用方法

時間:2016-11-25 01:49來源:Internet 作者:Internet 點擊:
<form method="post" enctype="multipart/form-data" action="import">//注意這裏的action和下面的url要一直,如果不寫

<form method="post" enctype="multipart/form-data" action="import">//注意這裏的action和下面的url要一直,如果不寫的話就算瀏覽器上傳成功了也會報404的錯誤
                <div >
                    <input name="file" type="file" />
                </div>
  </form>

<script type="text/javascript">

try {
             $(".dropzone").dropzone({
                    url:'import?ti='+new Date(),//上傳地址
                    paramName: "file", 
                    maxFilesize: 2.0, // MB
                    maxFiles:1,//一次性上傳的文件數量上限
                    acceptedFiles: ".xls",  
                    addRemoveLinks : true,//添加移除文件
                    autoProcessQueue: false,//不自動上傳
                    dictCancelUploadConfirmation:'你確定要取消上傳嗎?',
                    dictMaxFilesExceeded: "您一次最多只能上傳{{maxFiles}}個文件",
                    dictFileTooBig:"文件過大({{filesize}}MB). 上傳文件最大支持: {{maxFilesize}}MB.",
                    dictDefaultMessage :
                    '<span ><i ></i> 拖動文件至該處</span> \
                    <span >(或點擊此處)</span> <br /> \
                    <i ></i>',
                    dictResponseError: '文件上傳失敗!',
                    dictInvalidFileType: "你不能上傳該類型文件,文件類型只能是*.xls。",
                    dictCancelUpload: "取消上傳",
                    dictCancelUploadConfirmation: "你確定要取消上傳嗎?",
                    dictRemoveFile: "移除文件",
                    uploadMultiple:false,
                    //change the previewTemplate to use Bootstrap progress bars
                    previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-          name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress         progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div         class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message        \"><span data-dz-errormessage></span></div>\n</div>",
                    init: function() {
                       var submitButton = document.querySelector("#sureSubmit");
                        myDropzone = this; // closure
                        //为上傳按鈕添加點擊事件
                        submitButton.addEventListener("click", function () {
                           $('#subModel').modal('hide');
                           //手動上傳
                           myDropzone.processQueue();
                        });  
                        //添加了文件的事件
                        this.on("addedfile", function () {
                             $('#subModel').modal().css({
                                    'margin-top': function () {
                                        return (document.body.scrollHeight/ 2.5);
                                    }
                                }); 
                             $('#subModel').modal('show');
                        });
                        this.on("success", function(file,data) {
                            if(data=="upErr"){
                                alertMsg("上傳失敗!");                                
                            }else{
                                alertMsg(data);
                            }
                        });                      
                        this.on("error", function(file) {
                            alert("文件上傳失敗!");
                        });
                    },
                 
                    
                  });
                } catch(e) {
                  alert('瀏覽版本過低,不支持文件上傳!');
                }
            
            });

<script type="text/javascript">


 

以下是網上收的關於dropzone的一些相關數據:

功能選項

  • url:最重要的参數,指明了文件提交到哪個頁面。
  • method:默認为post,如果需要,可以改为put
  • paramName:相當於元素的name屬性,默認为file
  • maxFilesize:最大文件大小,單位是 MB。
  • maxFiles:默認为null,可以指定为一個數值,限制最多文件數量。
  • addRemoveLinks:默認false。如果設为true,則會给文件添加一個刪除鏈接。
  • acceptedFiles:指明允許上傳的文件類型,格式是逗號分隔的 MIME type 或者擴展名。例如:image/*,application/pdf,.psd,.obj
  • uploadMultiple:指明是否允許 Dropzone 一次提交多個文件。默認为false。如果設为true,則相當於 HTML 表單添加multiple屬性。
  • headers:如果設定,則會作为額外的 header 信息發送到服務器。例如:{"custom-header": "value"}
  • init:一個函數,在 Dropzone 初始化的時候調用,可以用來添加自己的事件監聽器。
  • forceFallback:Fallback 是一種機制,當瀏覽器不支持此插件時,提供一個備選方案。默認为false。如果設为true,則強制 fallback。
  • fallback:一個函數,如果瀏覽器不支持此插件則調用。

翻譯選項

  • dictDefaultMessage:沒有任何文件被添加的時候的提示文本。
  • dictFallbackMessage:Fallback 情況下的提示文本。
  • dictInvalidInputType:文件類型被拒絕時的提示文本。
  • dictFileTooBig:文件大小過大時的提示文本。
  • dictCancelUpload:取消上傳鏈接的文本。
  • dictCancelUploadConfirmation:取消上傳確認信息的文本。
  • dictRemoveFile:移除文件鏈接的文本。
  • dictMaxFilesExceeded:超過最大文件數量的提示文本。

常用事件

以下事件接收 file 为第一個参數

  • addedfile:添加了一個文件時發生。
  • removedfile:一個文件被移除時發生。你可以監聽這個事件並手動從服務器刪除這個文件。
  • uploadprogress:上傳時按一定間隔發生這個事件。第二個参數为一個整數,表示進度,從 0 到 100。第三個参數是一個整數,表示發送到服務器的字節數。當一個上傳結束時,Dropzone 保證會把進度設为 100。注意:這個函數可能被以同一個進度調用多次。
  • success:文件成功上傳之後發生,第二個参數为服務器響應。
  • complete:當文件上傳成功或失敗之後發生。
  • canceled:當文件在上傳時被取消的時候發生。
  • maxfilesreached:當文件數量達到最大時發生。
  • maxfilesexceeded:當文件數量超過限制時發生。

以下事件接收一個 file list 作为第一個参數(僅當uploadMultiple被設为true時才會發生)

  • successmultiple
  • completemultiple
  • cancelmultiple

特殊事件

  • totaluploadprogress:第一個参數为總上傳進度,第二個参數为總字節數,第三個参數为總上傳字節數。

From:ITEYE
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容