xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器。本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能。

首先,创建文件上传组件Ext.form.Panel,并添加一个上传按钮及按钮单击事件,该事件将验证并提交表单到upload.php的文件。看下面代码:

ExtJS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Ext.onReady(function () {
  Ext.widget('form', {
    title: 'Upload Demo',
    width: 400,
    bodyPadding: 10,
    items: [{
      xtype: 'filefield',
      name: 'file',
      fieldLabel: 'File',
      labelWidth: 50,
      anchor: '100%',
      buttonText: 'Select File...'
    }],
    buttons: [{
      text: 'Upload',
      handler: function () {
        var form = this.up('form').getForm();
        if (form.isValid()) {
          form.submit({
            url: '/extjs-tutorials/upload.php',
            waitMsg: 'Uploading your file...',
            success: function (f, a) {
              var result = a.result, data = result.data,
                name = data.name, size = data.size,
              message = Ext.String.format('<b>Message:</b> {0}<br>' +
                '<b>FileName:</b> {1}<br>' +
                '<b>FileSize:</b> {2}',
                result.msg, name, size);
              Ext.Msg.alert('Success', message);
            },
            failure: function (f, a) {
              Ext.Msg.alert('Failure', a.result.msg);
            }
          });
        }
      }
    }],
    renderTo: 'output'
  });
});

效果预览:

Upload.php文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if ($_FILES["file"]["error"] > 0)
{
  $error  $_FILES["file"]["error"];
  $response array('success' => false, 'msg' => $error);
  echo json_encode($response);
}
else
{
  $file_name $_FILES["file"]["name"];
  $file_type $_FILES["file"]["type"];
  $file_size round($_FILES["file"]["size"] / 1024, 2) . "  Kilo Bytes";
  $response array('success' => true,
    'data' => array('name' => $file_name'size' => $file_size),
    'msg' => 'File Uploaded successfully'
  );
  echo json_encode($response);
}
?>

选择要上传的文件,并点击上传按钮,效果如下:

PHP+ExtJS 文件上传示例的更多相关文章

  1. 【转载】兼容php5,php7的cURL文件上传示例

    转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...

  2. asp.net 文件上传示例整理

    ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录.  代码如下 复制代码 ...

  3. Extjs文件上传问题总结

    本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有 ...

  4. 自定义ExtJS文件上传

    日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...

  5. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  6. asp.net core系列 69 Amazon S3 资源文件上传示例

    一.  上传示例 Install-Package AWSSDK.S3 -Version 3.3.104.10 using Amazon; using Amazon.Runtime; using Ama ...

  7. ExtJs文件上传(Ext.ux.form.FileUploadField)

    Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /**  * @cfg {String} buttonText The b ...

  8. extjs文件上传

    EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar:   1.upload.js /* ...

  9. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

随机推荐

  1. PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)

    关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...

  2. sqlserver跨服务器数据库sql语句

    1.启用Ad Hoc Distributed Queries:exec sp_configure 'show advanced options',1reconfigureexec sp_configu ...

  3. php排序

    关于order by排序:单条件排序:order by id(按照id排序默认从小到大) order by id desc(按照id排序从大到小) 多条件排序:order by date,id(先按照 ...

  4. 【Alpha】Daily Scrum Meeting总结

    一.项目预期计划和现实进展 项目预期计划 现实进展 登陆 完成 使用菜单 完成 查看自己的信息 完成(额外完成可修改) 完成能用的界面 完成(额外美化) 可以导入导出表格 导入表格完成,导出未完成 教 ...

  5. 【最简单IOC容器实现】实现一个最简单的IOC容器

    前面DebugLZQ的两篇博文: 浅谈IOC--说清楚IOC是什么 IoC Container Benchmark - Performance comparison 在浅谈IOC--说清楚IOC是什么 ...

  6. 【转】logback logback.xml常用配置详解(一)<configuration> and <logger>

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...

  7. linux nginx 启动脚本

    linux nginx 启动脚本 [root@webtest76 ~]# vi /etc/init.d/nginx #!/bin/bash # nginx Startup script for the ...

  8. 总结-eclipse

    1.eclipse的workspace历史记录 打开eclipse/configuration/.settings/org.eclipse.ui.ide.prefs,把RECENT_WORKSPACE ...

  9. mock the facade

    mock the facade: Auth::shouldReceive('user')->andReturn($user = m::mock('StdClass')); $user->s ...

  10. The Path Attribute

    https://tools.ietf.org/html/rfc6265#section-5.1.1 4.1.2.4. The Path Attribute The scope of each cook ...