關于jquery.form.js mvc的使用介紹

jquery.form.js是一個非常方便的ajax文件上傳插件，同時，使用MVC（Model View Controller）的框架編寫代碼能夠更加清晰明了和易于維護，在使用jquery.form.js的時候也應該注意MVC的思想來組織代碼。

MVC架構主要分為三個部分，Model（模型）、View（視圖）和Controller（控制器），在使用jquery.form.js的時候，它可以負責View部分，即表單的提交。因此，我們需要編寫Model部分和Controller部分的代碼。

Model部分的工作是負責數據的存儲和處理，它是一個獨立的組件，可以方便的重用和測試。在上傳文件的時候，我們需要編寫一個Model來處理上傳文件的相關信息。Controller部分的工作是負責業務邏輯的處理和調度，它是View和Model之間的一個橋梁，在上傳文件的時候，我們需要編寫一個Controller來負責處理用戶的操作。

下面是一段使用MVC架構來實現jquery.form.js上傳文件的示例代碼：

var FileModel = function(file){
var _this = this;
_this.file = file;
_this.name = file.name;
_this.size = file.size;
}
var FileController = function(){
var _this = this;
_this.model = [];
_this.view = $(".file-upload-form");
_this.fileInput = $("#file-input");
_this.uploadBtn = $("#upload-btn");
_this.fileInput.change(function(e){
_this.onViewChange();
});
_this.uploadBtn.click(function(e){
_this.onViewSubmit();
});
}
FileController.prototype.onViewChange = function(){
var _this = this;
for(var i=0;i<_this.fileInput[0].files.length;i++){
_this.model.push(new FileModel(_this.fileInput[0].files[i]));
}
}
FileController.prototype.onViewSubmit = function(){
var _this = this;
_this.view.ajaxForm({
url:"uploader.php",
dataType:"json",
data:_this.model,
success:function(data){
//上傳成功操作
},
error:function(data){
//上傳失敗操作
}
}).submit();
}

上面的代碼中，FileModel負責處理上傳文件的信息，FileController負責調度和處理用戶的操作，我們使用jquery.form.js的ajaxForm方法來進行文件的上傳操作。使用MVC架構來實現jquery.form.js的上傳文件操作，使得代碼更加清晰明了，便于維護。