给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']来接收目标目录的值了。

评论

1 楼 mimang2007110 2010-10-19  

哥，你太强了，深度的支持你，