PHP+ExtJS 文件上传示例
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 文件上传示例的更多相关文章
- 【转载】兼容php5,php7的cURL文件上传示例
转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...
- asp.net 文件上传示例整理
ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. 代码如下 复制代码 ...
- Extjs文件上传问题总结
本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有 ...
- 自定义ExtJS文件上传
日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...
- struts2+extjs文件上传完整实现(攻克了上传中的各种问题)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...
- asp.net core系列 69 Amazon S3 资源文件上传示例
一. 上传示例 Install-Package AWSSDK.S3 -Version 3.3.104.10 using Amazon; using Amazon.Runtime; using Ama ...
- ExtJs文件上传(Ext.ux.form.FileUploadField)
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /** * @cfg {String} buttonText The b ...
- extjs文件上传
EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar: 1.upload.js /* ...
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
随机推荐
- PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)
关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...
- sqlserver跨服务器数据库sql语句
1.启用Ad Hoc Distributed Queries:exec sp_configure 'show advanced options',1reconfigureexec sp_configu ...
- php排序
关于order by排序:单条件排序:order by id(按照id排序默认从小到大) order by id desc(按照id排序从大到小) 多条件排序:order by date,id(先按照 ...
- 【Alpha】Daily Scrum Meeting总结
一.项目预期计划和现实进展 项目预期计划 现实进展 登陆 完成 使用菜单 完成 查看自己的信息 完成(额外完成可修改) 完成能用的界面 完成(额外美化) 可以导入导出表格 导入表格完成,导出未完成 教 ...
- 【最简单IOC容器实现】实现一个最简单的IOC容器
前面DebugLZQ的两篇博文: 浅谈IOC--说清楚IOC是什么 IoC Container Benchmark - Performance comparison 在浅谈IOC--说清楚IOC是什么 ...
- 【转】logback logback.xml常用配置详解(一)<configuration> and <logger>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- linux nginx 启动脚本
linux nginx 启动脚本 [root@webtest76 ~]# vi /etc/init.d/nginx #!/bin/bash # nginx Startup script for the ...
- 总结-eclipse
1.eclipse的workspace历史记录 打开eclipse/configuration/.settings/org.eclipse.ui.ide.prefs,把RECENT_WORKSPACE ...
- mock the facade
mock the facade: Auth::shouldReceive('user')->andReturn($user = m::mock('StdClass')); $user->s ...
- 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 ...