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. hg 的使用简介

    克隆仓库 仓库是一个目录,它包含所有我们希望保留历史的源代码和这些源代码的历史记录. 克隆就是生产一个仓库的副本,这样可以有一个本地私有的仓库来工作. hg clone http://远程仓库地址:端 ...

  2. SQL Server中的事物

    1.事务的四个属性 原子性Atomicity,一致性Consistency,隔离性Isolation,持久性Durability ,即ACID特性. 原子性:事务必须是一个完整工作的单元,要么全部执行 ...

  3. [lua]安卓ndk如何编译lua库

    这里说的lua库是标准lua库,不包含tolua,不包含cocos2dx的各种lua扩展,是干净的lua. 参考: http://stackoverflow.com/questions/1229965 ...

  4. 20145220&20145209&20145309信息安全系统设计基础实验报告(4)

    20145220&20145209&20145309信息安全系统设计基础实验报告(4) 实验报告链接: http://www.cnblogs.com/zym0728/p/6132246 ...

  5. HJ-第二周,真机调试

      报错: Showing Recent Issues   Huiju_app requires a provisioning profile. Select a provisioning profi ...

  6. A Taxonomy of Parallel Processor Architectures

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION

  7. 【转】 NGUI 监听按钮除OnClick外其他事件的方法,附简易改编的UIButton类

    http://blog.csdn.net/icefantasylcj/article/details/49450555 大家好,我是雨中祈雨.一直以来,CSDN都是我最好的编程助手.这是我在CSDN的 ...

  8. 月四 周2 ii

    今日通过色鸟鸟 以此纪念 不是很想玩红鸟鸟 简单来说因为红鸟鸟结束后,五彩斑斓系列就和我没关系了= = 珍惜为每一部作品感伤的每一刻吧

  9. mvc 3 Mvc 4 使用Forms 登录验证随笔一

    前言 本人虽然做 .Net 也有五年有余,可是没什么大才,总是干些打杂的活,技术很少差劲呀.以前不管是做内部管理系统,还是企业平台,保存用户登录信息用的都是Session,也许是从一开始就接触Sess ...

  10. surface pro 4 wifi掉线问题

    更新你的无线网卡驱动到最新版本15.68.9032.47,重启.或者运行regedit修改注册表 HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\mr ...