【ExtJs】ExtJs的文件上传

浏览数：55 / 时间：2015年06月09日

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}'
	}"; 
}    
  
?>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【ExtJs】ExtJs的文件上传