給ajaxfileupload上傳文件時增加一些參數

ajaxfileupload是一個jquery的文件上傳插件,可以利用ajax無刷新上傳文件到服務器。其實現原理爲:利用js動態創建一個表單,並提交。但默認情況下,該插件只能上傳一個文件,且不能攜帶其它參數。有時候,我想給在上傳文件的同時,還帶一個參數,用來表示將文件上傳到哪個目錄下。下面的修改就可以實現這個功能。
第一步:調用插件的地方,加上參數:

$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
var targetDir = '/usr/local/apache/htdoc/upload';
var url = '<?php echo site_url('file/upload');?>';
$.ajaxFileUpload({
url: url,
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'text',
//增加一個目標目錄的參數
targetDir:targetDir,
success: function (data, status) {
$('#upload_html').text(data);
},
error: function (data, status, e) {
$('#upload_html').text(data);
}
});


第二步,修改插件代碼:
在ajaxfileupload.js中調用創建表單的函數處,增加一個參數:

var form = jQuery.createUploadForm(id, s.fileElementId,s.targetDir);

修改createUploadForm函數:

createUploadForm: function(id, fileElementId,targetDir)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var targetId = 'targetDir'+ id;
var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
var targetDirElement = '<input type="text" name="targetDir" value="'+targetDir+'">';
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
$(targetDirElement).appendTo(form);
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},

在php接受上傳處理的頁面,就可以用$_POST['targetDir']來接收目標目錄的值了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章