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. Skype无法收发组消息

    我用微软账户登录的Skype 发现无法收发组消息  -  提示发送消息不可用 卸了重装  -  提示 "无法发送消息, 请尝试获取最新的消息版本, 或者是组内成员使用旧版本无法同时视频和发送 ...

  2. Redis 数据类型总结—String

    1.1 数据类型 Redis常用五种数据类型:string,   hash,   list,   set,    zset(sorted set). Redis内部使用一个redisObject对象来 ...

  3. python: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

  4. java并发编程(六)Runnable和Thread实现多线程的区别

    http://blog.csdn.net/ns_code/article/details/17161237

  5. 获取文件hash值

    public string getFilesMD5Hash(string file)        {            //MD5 hash provider for computing the ...

  6. 那些年一起用过的iOS开发利器之Parse

    阅读此文章需要对Objective-C和iOS有一定的了解,完全没有基础的朋友请先阅读<让不懂编程的人爱上iPhone开发>系列教程. 什么是后台服务(back-end service)? ...

  7. Windows2003远程桌面单会话登录

    在使用远程桌面连接到Windows2003的时候默认设置是同一用户可以进行多会话登录. (在winxp.win7及以后版本的windows中已经变成单会话登录.) 同用户多会话登录在管理上带来诸多麻烦 ...

  8. 【5集iCore3_ADP演示视频】5-4 iCore3与应用开发平台的组装与拆卸

    iCore3双核心应用开发平台基于iCore3双核心板,包含ARM.FPGA.7寸液晶屏.双通道数字示波器.任意波发生器.电压表等模块,是一款专为电子爱好者设计的综合性电子学习系统. [视频简介]本视 ...

  9. php如何查看变量是真实被引用

    $var1 = 'Hello World'; $var2 = ''; $var2 =&$var1; debug_zval_dump(&$var1); $a = "aaa&qu ...

  10. webbrowser 内核切换

    修改注册表位置: [HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER ...