Extjs4创建简单的图片上传

最新推荐文章于 2025-09-12 13:16:34 发布

weixin_30715523

最新推荐文章于 2025-09-12 13:16:34 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： php ui

原文链接：http://www.cnblogs.com/crazymus/archive/2012/03/28/2422072.html

本文展示了一个使用ExtJS实现的图片上传组件及其PHP后端处理逻辑。前端通过ExtJS表单验证用户上传的图片格式，并提交到服务器；服务器端接收文件并检查是否存在同名文件，确保文件正确保存。

先给出Extjs代码：

Ext.define('MyApp.view.ui.MyForm', {
    extend: 'Ext.form.Panel',

    height: 107,
    width: 398,
    bodyPadding: 10,
    title: '上传图片',

    initComponent: function() {
var me = this;
        me.items = [
            {
                xtype: 'filefield',
                name: 'file',
                fieldLabel: '请选择图片',
                anchor: '100%',
                allowBlank:false,
                regex: /((\.jpg)|(\.png)|(\.gif))$/i,
                invalidText:'请选择正确的图片格式'
            },
            {
                xtype: 'button',
                text: '点击上传',
                handler:function(btn){
var form=btn.up('form').getForm();
if(form.isValid())
                    {
                        form.submit({
                            url:'pro.php',
                            waitMsg:'正在上传中...',
                            success:function(grid,action){
                                    Ext.Msg.alert('信息提示',action.result.msg);
                                },
                            failure:function(grid,action){
                                    Ext.Msg.alert('信息提示',action.result.msg);
                            }

                        });
                    }
else
                    {
                        Ext.Msg.alert('信息提示','请选择正确的图片格式');
                    }
                }

            }
        ];
        me.callParent(arguments);
    }
});

Ext.onReady(function(){
    Ext.create('MyApp.view.ui.MyForm',{

        renderTo:Ext.get('main')
    });
})

再给出服务器端代码（PHP）:

<?php

if ($_FILES["file"]["error"] > 0)
    {
echo "{
                success:false,
                msg:'上传出错，请重试'
            }";
    }
else
    {
if (file_exists("upload/" . $_FILES["file"]["name"]))
          {
echo "{
                  success:false,
                  msg:'文件已存在'    
                  }
              ";
          }
else
          {
$now=time();//获取当前时间戳
            $path_arr=pathinfo($_FILES["file"]["name"]);
$new_file_name=$now.'.'.$path_arr['extension'];
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$new_file_name);
echo "{
                  success:true,
                  msg:'上传成功'
              }";
          }
    }


  ?>

解释一下pathinfo()函数,用来获取一个文件名中的后缀名，不带点号。下面是API中给的例子：

<?php
$path_parts = pathinfo("/www/htdocs/index.html");
echo $path_parts["dirname"] . "\n";//输出/www/htdocs 
echo $path_parts["basename"] . "\n";//输出index.html
echo $path_parts["extension"] . "\n";//输出html
?>