使用类似ajax上传文件方法
2012-12-03 13:55
387 查看
众所周知ajax是使用了浏览器内部的XmlHttpRequest对象来传输XML数据的。既然是Xml的数据传输,那么传输的数据肯定是文本的,而文件上传则需要传输二进制的数据,显然用ajax是不可能的。
这里要说的是用ajax上传文件其实只是类似ajax的那种操作,实际上并没有用到xmlhttprequest对象,对于用户来说是不管使用的什么技术,他们要的是流程简便。客户有个需求是需要在表单操作时点击浏览文件后判断文件是否合法,以及其是否超过上传的限制大小,并且要考虑到不同浏览器兼容。开始准备找javascript 的html object{input{file}}对象,发现没有兼容的对象,于是被迫使用伪ajax。
我的思路和方法是:
添加一个隐藏的iframe和ajax_callback函数
当用户行为触发时改变form的action值并且target到隐藏的iframe
iframe中的伪ajax处理结束后调用parent.ajax_callback来处理结果
在ajax_callback中还原form的原始action值和target值
example:
html code:sample.html
<script type="text/javascript" language="javascript" src="check_file.js"></script>
<form name="upfile_form" action="request.php?act=upload" method="POST" enctype="multipart/form-data">
<p>input file title:
<input type="text" name="file_title" />
</p>
<p>select less than 200K file:
<input type="file" name="upload_file" id="upload_file" onchange="checkFileSize(this);" />
</p>
<p>
<input type="submit" value="submit" />
</p>
<iframe name="check_file_frame" style="display:none;"></iframe>
</form>
js code:check_file.js
var fileForm = new Object();
function checkFileSize(fileObj) {
if(fileObj.value != "") {
var form = document.forms['upfile_form'];
//把form的原始数据缓存起来
fileForm.f = form;
fileForm.a = form.getAttribute("action"); //form.action 为一个静态的对象,所以这里要使用getAttribute方法取值
fileForm.t = form.target;
//请求服务器端
form.target = "check_file_frame";
form.action = "./ajax.php?act=upload";
//form.submit(); 其实上面的action已经会执行submit操作,这步可有可无
}
return false;
}
function ajax_callback(result) {
//还原form属性
fileForm.f.target = fileForm.t;
fileForm.f.setAttribute("action", fileForm.a);
//处理结果
switch(result) {
case 0:
alert("文件超过了200K或者没有选择文件,请重新上传!");
//todo somthing
default :
alert("合法");
//do somthing,如果你想使用这种方法实现真正的上传的话,那么在成功后把返回的文件路经存储在一个 input[hidden]里是个不错的办法
}
return ;
}
phpcode:ajax.php
<script type="text/javascript" language="javascript">
<?php
if($_REQUEST['act'] == "upload") {
if(empty($_FILES['upload_file'])) {
die("parent.ajax_callback(0);");
}
if($_FILES['upload_file']['size'] > 200*1024) {
die("parent.ajax_callback(0);");
}
die("succeed");
}
?>
</script>
这里要说的是用ajax上传文件其实只是类似ajax的那种操作,实际上并没有用到xmlhttprequest对象,对于用户来说是不管使用的什么技术,他们要的是流程简便。客户有个需求是需要在表单操作时点击浏览文件后判断文件是否合法,以及其是否超过上传的限制大小,并且要考虑到不同浏览器兼容。开始准备找javascript 的html object{input{file}}对象,发现没有兼容的对象,于是被迫使用伪ajax。
我的思路和方法是:
添加一个隐藏的iframe和ajax_callback函数
当用户行为触发时改变form的action值并且target到隐藏的iframe
iframe中的伪ajax处理结束后调用parent.ajax_callback来处理结果
在ajax_callback中还原form的原始action值和target值
example:
html code:sample.html
<script type="text/javascript" language="javascript" src="check_file.js"></script>
<form name="upfile_form" action="request.php?act=upload" method="POST" enctype="multipart/form-data">
<p>input file title:
<input type="text" name="file_title" />
</p>
<p>select less than 200K file:
<input type="file" name="upload_file" id="upload_file" onchange="checkFileSize(this);" />
</p>
<p>
<input type="submit" value="submit" />
</p>
<iframe name="check_file_frame" style="display:none;"></iframe>
</form>
js code:check_file.js
var fileForm = new Object();
function checkFileSize(fileObj) {
if(fileObj.value != "") {
var form = document.forms['upfile_form'];
//把form的原始数据缓存起来
fileForm.f = form;
fileForm.a = form.getAttribute("action"); //form.action 为一个静态的对象,所以这里要使用getAttribute方法取值
fileForm.t = form.target;
//请求服务器端
form.target = "check_file_frame";
form.action = "./ajax.php?act=upload";
//form.submit(); 其实上面的action已经会执行submit操作,这步可有可无
}
return false;
}
function ajax_callback(result) {
//还原form属性
fileForm.f.target = fileForm.t;
fileForm.f.setAttribute("action", fileForm.a);
//处理结果
switch(result) {
case 0:
alert("文件超过了200K或者没有选择文件,请重新上传!");
//todo somthing
default :
alert("合法");
//do somthing,如果你想使用这种方法实现真正的上传的话,那么在成功后把返回的文件路经存储在一个 input[hidden]里是个不错的办法
}
return ;
}
phpcode:ajax.php
<script type="text/javascript" language="javascript">
<?php
if($_REQUEST['act'] == "upload") {
if(empty($_FILES['upload_file'])) {
die("parent.ajax_callback(0);");
}
if($_FILES['upload_file']['size'] > 200*1024) {
die("parent.ajax_callback(0);");
}
die("succeed");
}
?>
</script>
相关文章推荐
- 文件上传ajaxFileUpload.js使用方法 包含后台接收方法
- 使用jquery.form插件的ajaxSubmit方法上传文件
- Query插件之ajaxFileUpload使用方法——input.change()事件的时候实现文件上传
- 通过Ajax使用FormData对象无刷新上传文件方法
- ASP.NET 使用ajaxupload.js插件出现上传较大文件失败的解决方法
- 使用ajax上传/下载文件方法
- 使用ajaxfileupload.js上传文件成功之后,没有执行success方法
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
- 表单包含file上传文件提交,使用ajaxSubmint或者ajaxForm 遇到的问题以及解决方法
- 使用ajaxfileupload.js上传文件成功之后,不走success的解决方法
- spring-mvc使用ajaxFileUpload上传文件总是进入error方法
- java文件上传ajaxFileUpload.js使用方法
- SpringMVC上传文件FileUpload使用方法详解
- 使用Ajax异步上传文件
- GitHub基础学习-使用eclipse的EGit插件向GitHub上传项目文件的方法
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
- 使用ajax上传文件
- Ajax使用FormData对象上传文件
- 使用ajax提交form表单,包括ajax文件上传
- 使用ajax提交form表单,包括ajax文件上传