转: 如何实现jQuery的Ajax文件上传
【PHP文件上传】
在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的。
实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件。
而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的。那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:
test.html
<form action="do_file_upload.php" method="post" enctype="multipart/form-data">
<p>Pictures:
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>
注意:enctype="multipart/form-data",是必需的,它告诉FORM表这个是一文件上传类型,一旦这次请求成功后,文件就被上传到了服务器的临时文件夹中,
至于到达目的地后,文件将会被怎么样处理那就是PHP,JSP,ASP的事了。
(不过,你不要高兴的太早,如果该文件没有被移动到其它地方也没有被改名,则该文件将在表单请求结束时被删除。所以我们要写一个处理上传文件的脚本)
这里我们用PHP来处理
do_file_upload.php
<?php
$error = ""; //上传文件出错信息
$msg = "";
$fileElementName = 'picture';
$allowType = array(".jpg",".gif",".png"); //允许上传的文件类型
$num = strrpos($_FILES['picture']['name'] ,'.');
$fileSuffixName = substr($_FILES['picture']['name'],$num,8);//此数可变
$fileSuffixName = strtolower($fileSuffixName); //确定上传文件的类型
$upFilePath = 'd:/'; //最终存放路径
if(!empty($_FILES[$fileElementName]['error']))
{
switch($_FILES[$fileElementName]['error'])
{
case '1':
$error = '传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值';
break;
case '2':
$error = '上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值';
break;
case '3':
$error = '文件只有部分被上传';
break;
case '4':
$error = '没有文件被上传';
break;
case '6':
$error = '找不到临时文件夹';
break;
case '7':
$error = '文件写入失败';
break;
default:
$error = '未知错误';
}
}elseif(empty($_FILES['fileToUpload']['tmp_name']) || $_FILES['fileToUpload']['tmp_name'] == 'none')
{
$error = '没有上传文件.';
}else if(!in_array($fileSuffixName,$allowType))
{
$error = '不允许上传的文件类型';
}else{
$ok=@move_uploaded_file($_FILES['fileToUpload']['tmp_name'],$upFilePath);
if($ok === FALSE){
$error = '上传失败';
}
}
?>
另注:关于$_FILES数组
此数组包含有所有上传的文件信息,即记录下了上传文件时的相关信息。
以上范例中 $_FILES 数组的内容如下所示。我们假设文件上传字段的名称如上例所示,为 userfile。名称可随意命名。
$_FILES['userfile']['name']
客户端机器文件的原名称。
$_FILES['userfile']['type']
文件的 MIME 类型,如果浏览器提供此信息的话。一个例子是“image/gif”。不过此 MIME 类型在 PHP 端并不检查,因此不要想当然认为有这个值。
$_FILES['userfile']['size']
已上传文件的大小,单位为字节。
$_FILES['userfile']['tmp_name']
文件被上传后在服务端储存的临时文件名。
$_FILES['userfile']['error']
和该文件上传相关的错误代码。此项目是在 PHP 4.2.0 版本中增加的。
【AJAX文件上传】
其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。
实际上在用PHP上传文件时。。。只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是)。
可是功能上又要要求实现所谓的“异步上传”,怎么办呢??只能借助于第三方的组件,或者自己写一个(在网页里嵌入一个IFRAME)。但如果是考虑开发时间,那以用第三方的,这里有一个不错的jQuery的Ajax文件上传的组件,是“ajaxfileupload.js",其组件下载地址为:http://www.phpletter.com/,下载完毕里面有一个php的应用demo,很容易看懂的。
过程:
(1 )前端上文件的代码: test.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //你处理上传文件的服务端
secureuri:false,
fileElementId:'img',
dataType: 'json',
success: function (data)
{
alert(data.file_infor);
}
}
)
return false;
}
</script>
相应的HTML为:
<input id="img" type="file" size="45" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
这样客户端就完成了。
(2) 再服务器端时 doajaxfileupload.php
此处为了简便的检测是否真正的传值过来了,你可以将它存起来了。
$file_infor = var_export($_FILES,true);
file_put_contents("d:file_infor.php".$file_infor);
这样你打来刚生成的file_infor.php文件时,你又看到了熟悉的信息了:
array(
'name'=>'lamp.jpg',
'type'=>'image/pjpeg',
'tmp_name'=>'c:/windows/temp/phpFA.tmp',
'error'=>0,
'size'=>3127
)
当然,真正的处理类于这样的:
<?php
$upFilePath = "d:/";
$ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
if($ok === FALSE){
echo json_encode('file_infor'=>'上传失败');
}else{
echo json_encode('file_infor'=>'上传成功');
}
?>
另注:实际上,你可以在一个页面里嵌入一个IFRAME,然后在IFRAME使用原生的POST表单提交.JQUERY的这个插件也是采用了这种方式。只不过它是动态生成的IFRAME 与表单
~~~ phpleter.com 下载的ajaxfileupload.js 缺少方法 handleError 需要自己写一下,以输出错误信息,帮助调试
~~~ajaxfileupload.js的原理实际上是:1.创建form 2.创建iframe 3.复制file控件并append到新form 4.新的form.submit到iframe 5.提取iframe输出的结果显示回主页面
转: 如何实现jQuery的Ajax文件上传的更多相关文章
- Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传
<!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
随机推荐
- 如何成为uber司机,uber司机详细注册流程
怎样注册uber司机 如何注册加入uber司机 全国加入Uber 的要求 车辆要求:要求裸车价8万以上,车龄5年以内,第三者责任险保额30万以上,不支持20万以下的面包车/商务车,不支持4座以下车辆. ...
- UI基础:UILabel.UIFont
UILabel:标签 继承自UIView ,在UIView基础上扩充了显示文本的功能.(文本框) UILabel的使用步骤 1.创建控件 UILabel *aLabel=[[UILabel alloc ...
- 在SSIS包中使用 Checkpoint从失败处重新启动包
使用SSIS做ETL的过程中会遇到各种各样的错误,对于一些大数据量的Job失败以后我们不希望重新运行,因为重新运行的时间开销是非常大的,我们只希望从失败的部分开始运行,这样可以省去很多的时间. SSI ...
- linux select 网络模型
io模型: 同步IO: 阻塞形式,非阻塞形式(轮询).信号驱动IO.IO复用(select, poll, epoll): 异步io:aio_read() 典型场景: 1.客户端处理多种IO------ ...
- 2.一步一步学c#(二):核心c#
简单的控制台应用程序. 代码(它有把某条消息写到屏幕上的一个类组成) 编译并运行程序得到结果: 在上面的代码示例中,前几行代码与名称空间有关,名称空间是把相关类组合在一起的方式.namespace关键 ...
- ios7高级
1.实现控制器和视图. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 ...
- .NET 多语言支持解决方案 (转)
asp.net 2.0中的App_GlobalResources可以用来解决本地化的问题,程序会根据浏览器的语言首选项自动判断显示出本地化的界面. 首先在App_GlobalResources新建re ...
- window.parent与window.opener的区别与使用
window.parent 是iframe页面调用父页面对象 举例: a.html 如果我们需要在b.html中要对a.html中的username文本框赋值(就如很多上传功能,上传功能页在ifrma ...
- Android adb 命令图解
做了这么长时间的开发与管理,在命令上总是自见则过,往往却忽视了在其命令上的分享过程,所以现在稍微有点时间就把 其命令的相关操作来简单的扫盲一番吧,也系统通过这种方式去授之以渔而不是鱼,好了,我以图解的 ...
- Linux 网络编程: xinetd time
前言 终于把 xinetd 服务装好了,那就在来实现一下 TCP 协议从服务器和本机获取时间吧.那么多思想汇报还没写,我也是醉了. 安装 xinetd apt-get install xinetd 配 ...