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']来接收目标目录的值了。
分享到:
相关推荐
这个文件是在ajaxFileUpload.js文件基础上修改的,主要解决了以下问题: 1、由于jquery版本问题引起的bug,解决了ajaxFileUpload 报jQuery....3、优化,解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug
该js包是在官方下载的ajaxFileUpload.js基础上所做修改后的包,修改该包所要解决的问题包括: 1、浏览器上传文件后不刷新页面再次点击上传时后台...3、解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug。
使用Jquery做上传文件处理时,用到了ajaxfileupload.js 这个第三方代码,但是这个js几乎就是半成品,问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题: 1:无法带参数提交,只能上传文件; 2:...
曾经下载多个版本,均未找到能完美实现附带参数上传的ajaxfileupload JS文件。这是自己多次修改目前一直使用的珍藏源码,绝对能实现上传文件的同时附带参数上传,如果需要了解后台对参数的解析方法,可以留言询问。...
jQuery.AjaxFileUpload.js是一款jQuery插件,用于通过ajax上传文件。 语法: $.ajaxFileUpload([options]) options参数说明: 1、url 上传处理程序地址。 2,fileElementId 需要上传的文件域的ID,即<...
一、ajaxFileUpload是一个异步上传文件的jQuery插件。 传一个不知道什么版本的上来,以后不用到处找了。 语法:$.ajaxFileUpload([options]) options参数说明: 1、url 上传处理程序地址。 2,fileElementId ...
该js包是在官方下载的ajaxFileUpload.js基础上所做修改后的包,修改该包所要解决的问题包括: 1、浏览器上传文件后不刷新页面再次点击上传时后台...3、解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug
Zepto.ajax文件上传 zepto 的文件上传库 如何使用 Zepto.ajaxFileUpload(settings); settings为上传参数,除Zepto默认设置外,需要以下元素 String fileElementId:要上传的输入元素的id 数组数据:要上传的数据,...
无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单。...所以,我修改了一下该脚本,增加个一个data对象参数。 一、原理 我这里使用的是PHP作为服务端脚本,几乎在每本较少PHP的书上都会提
后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果。网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理。 一、详解...
ajaxfileupload.js原生版本有以下问题 1:无法带参数提交,只能上传文件; 2:运行时报:jquery.handleError is not a function 错误; 3:执行成功后,始终指向error方法处理,无法执行sucess方法; 此版本解决...
做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去… 等真正实现的时候才发现,根本行不通。 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。 ...
使用ajaxfileupload.js实现上传文件功能 一、ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options]) options参数说明: 1、url 上传处理程序地址 2、fileElementId 文件选择框的id属性...
无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单。而利用JavaScript来配合,即可实现Ajax方式的文件上传。虽然jQuery本身没有提供...所以,我修改了一下该脚本,增加个一个data对象参数。
修复问题: a:执行成功后,始终指向error方法处理,无法执行sucess方法; b:无法带参数提交,只能上传文件; c:运行时报:jQuery.handleError is not a function 错误;
同时,ajax并不支持文件的上传,此时ajaxfileupload就应运而生了,本人,在此基础上经过改写,使其同时支持,多文件上传isMore(boolen)、序列化类型参数ContentType(Serial/json)’,并且给出了SpringMVC的文件...