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 ...
随机推荐
- Skype无法收发组消息
我用微软账户登录的Skype 发现无法收发组消息 - 提示发送消息不可用 卸了重装 - 提示 "无法发送消息, 请尝试获取最新的消息版本, 或者是组内成员使用旧版本无法同时视频和发送 ...
- Redis 数据类型总结—String
1.1 数据类型 Redis常用五种数据类型:string, hash, list, set, zset(sorted set). Redis内部使用一个redisObject对象来 ...
- python: DOM 小实例
一.全选 全部取消 反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
- java并发编程(六)Runnable和Thread实现多线程的区别
http://blog.csdn.net/ns_code/article/details/17161237
- 获取文件hash值
public string getFilesMD5Hash(string file) { //MD5 hash provider for computing the ...
- 那些年一起用过的iOS开发利器之Parse
阅读此文章需要对Objective-C和iOS有一定的了解,完全没有基础的朋友请先阅读<让不懂编程的人爱上iPhone开发>系列教程. 什么是后台服务(back-end service)? ...
- Windows2003远程桌面单会话登录
在使用远程桌面连接到Windows2003的时候默认设置是同一用户可以进行多会话登录. (在winxp.win7及以后版本的windows中已经变成单会话登录.) 同用户多会话登录在管理上带来诸多麻烦 ...
- 【5集iCore3_ADP演示视频】5-4 iCore3与应用开发平台的组装与拆卸
iCore3双核心应用开发平台基于iCore3双核心板,包含ARM.FPGA.7寸液晶屏.双通道数字示波器.任意波发生器.电压表等模块,是一款专为电子爱好者设计的综合性电子学习系统. [视频简介]本视 ...
- php如何查看变量是真实被引用
$var1 = 'Hello World'; $var2 = ''; $var2 =&$var1; debug_zval_dump(&$var1); $a = "aaa&qu ...
- webbrowser 内核切换
修改注册表位置: [HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER ...