【ExtJs】ExtJs的文件上传
ExtJs的文件上传也是采用Ajax的方式，基本上，用户上传之后，其结果马上推回给前台。下面以一个ExtJs图片上传系统，说明这个问题。
一、基本目标
实现如下的一个图片上传的系统，不是基本图片格式，大于1M的图片不给予上传，上传成功显示图片，上传不成功，则显示错误信息。
二、基本思想
这个工程的目录结构如下，
如FileUpload.html的HTML布局所示，js与ext-theme-classic下面皆是Ext的基本资源。然后Upload文件夹用来存放上传的图片，FileUpload.html就是前台布局页面，里面有一个直接渲染到<body>标签的Panel组件，Panel组件中，仅有一个文件域，相当于<input type="file" />。上传成功之后弹出一个可以关闭的窗口window。photoSubmit.php是上传文件的后台处理页面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>extFileUpload</title>
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
<link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>三、制作过程
1、FileUpload.html
这个前台布局页面还是使用了表单最基本的anchor布局，然后利用了ExtJs的Ajax表单提交方式，这都在《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（点击打开链接）已经具体讲过。记住ExtJs文件域类型是filefield。此panel的底部工作栏还是采用经典的左右空白站位符，中间放一个“确定”按钮的布局方式。此按钮在用户没有选择文件之间是不可用的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>extFileUpload</title>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<script>
Ext.onReady(function(){
Ext.onReady(function(){
var form1 = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
method: 'POST',
layout: 'anchor',
title: '图片上传',
items: [{
xtype: 'filefield',
anchor: '100%',
name: 'file', //此文件传递给后台处理上传页面的标识
allowBlank: false, //不允许为空
buttonText: '选择图片' //那个上传按钮的文字
}],
bbar: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: '确定',
disabled: true, //没有通过验证，此按钮不可用
formBind: true,
listeners: {
click: function(){
var thisForm = form1.getForm();
thisForm.submit({
url: "photoSubmit.php",
success: function(form, action){
Ext.create('Ext.window.Window', {
title:'上传成功',
border: false, //没有边框
items: [{
xtype: 'image',
src: action.result.msg
}]
}).show();
},
failure: function(form, action){
Ext.create('Ext.window.Window', {
title: '上传失败',
border: false, //没有边框
items: [{
xtype: 'label',
text: action.result.msg
}]
}).show();
}
});
}
}
}, {
xtype: 'tbfill'
}]
});
})
});
</script>
2、photoSubmit.php
ExtJs的上传与否取决与这个页面打印出来的Json信息。此页面与《【php】文件的上传与下载》（点击打开链接）的上传部分没有半点区别，使用Jsp的朋友可以参考，《【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统，支持图片上传后显示》（点击打开链接）；《【Struts2】文件的上传与上传权限的控制》（点击打开链接）；使用Asp或者.NET的朋友也是一样的，关键是你的后台页面处理完上传的文件之后，和《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（点击打开链接）一样，打印出如下的字符串让FileUpload.html识别：
//ExtJs收到此Json则认为上传成功
{
"success":true,
"msg":"ss" //要捎回前台的信息
}
//ExtJs收到此Json则认为上传失败
{
"success":false,
"msg":"ss" //要捎回前台的信息
} 因此，便有了如下的php代码：
<?php
//看是否是通过正常途径传递一个file过来了
if(empty($_FILES["file"])){
//如果不是，则是非正常打开此页，马上重定向，伪装这页不存在
header("location: error.php");
exit;
}
else{
header("Content-type: text/html; charset=utf-8");
}
//这是判断是否上传的file
$canUpload=true;
//这样就能够取得上传的文件名
$fileName=$_FILES["file"]["name"];
//通过对$fileName的处理，就能够取得上传的文件的后缀名
$fileExtensions=strrchr($fileName, '.');
//这样就能够取得上传文件的大小
$fileSize=$_FILES["file"]["size"];
//即将被打印的错误信息
$errmsg="";
//这里是文件的异常，一般不会出现
if($_FILES["file"]["error"]>0){
$errmsg .= "异常：".$_FILES["file"]["error"]."！";
$canUpload=false;
}
//如果上传的文件名的后缀不是以下的几种则不能上传
if($fileExtensions!=".bmp" && $fileExtensions!=".gif" && $fileExtensions!=".jpg" && $fileExtensions!=".jpeg" && $fileExtensions!=".png"){
$errmsg .= "只能上传图片类型！后缀名必须为：.bmp,gif,jpg,jpeg,png任一！";
$canUpload=false;
}
//如果上传的文件大于1M则也不能上传
if($fileSize>1*1024*1024){
$errmsg .= "文件太大！请少于1M！";
$canUpload=false;
}
//如果文件可以上传
if($canUpload==true){
//保存在服务器的名字则是时间戳，加文件后缀名
$saveName=time().$fileExtensions;
//取得服务器的目录的绝对路径。
$basepath=str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/";
//然后则保存这个上传文件
move_uploaded_file($_FILES["file"]["tmp_name"],$basepath."/upload/".$saveName);
//打印上传成功之后的json给正在等待的ExtJsAjax，捎一个图片的保存地址给它。正常来说，这个地址还应该入库。
echo "{
'success':true,
'msg':'upload/{$saveName}'
}";
}
else{
//上传不成功，则捎一个失败信息给前台。
echo "{
'success':false,
'msg':'{$errmsg}'
}";
}
?> 郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
