<form method="post" enctype="multipart/form-data" class="dropzone" action="import">//注意這里的action和下面的url要一直，如果不寫的話就算瀏覽器上傳成功了也會報404的錯誤
<div class="fallback">
<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 class="bigger-150 bolder"><i class="icon-caret-right red"></i> 拖動文件至該處</span> \
<span class="smaller-80 grey">(或點擊此處)</span> <br /> \
<i class="upload-icon icon-cloud-upload blue icon-3x"></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,.objuploadMultiple：指明是否允許 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時才會發生）
successmultiplecompletemultiplecancelmultiple
特殊事件
totaluploadprogress：第一個參數為總上傳進度，第二個參數為總字節數，第三個參數為總上傳字節數。