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 ...
随机推荐
- sketchup
1. clean start 1. 删除中间人物 2. windows---style 3. Windows---Model Info 2. 好的建模习惯 1. 正面朝镜头 View---ToolBa ...
- [NOIP2014]联合权值 题解
题目大意: 有一棵树,求距离为2的点权的乘积的和以及最大值. 思路: 枚举每一个点,则与其相邻的点互为距离为2的点.该部分的最大值为点权最大的两个点的积,和为点的权值和的平方减去每个点的平方,这样每条 ...
- BZOJ1097: [POI2007]旅游景点atr
..k次最短路后,考虑如何满足先走一些点 用状压dp,每一个点考虑它所需要经过的点a[i],当当前走过的点包含a[i]时,i 这个点才可以到达. 写的时候用记忆化搜索. #include<bit ...
- ios 计算缓存大小并清理缓存
SDWebImage.WebView产生的缓存 1.计算缓存大小 //SDWebImage缓存大小 UILabel *cleanDetailText = [[UILabel alloc]init]; ...
- 【python】安装python第三方库lxml时,遇到问题:[ERROR: 'xslt-config' 不是内部或外部命令,也不是可运行的程序]
一.概述 lxml介绍http://lxml.de/ 二.问题 ERROR: 'xslt-config' 不是内部或外部命令,也不是可运行的程序 三.解决方法 Scrapy在Windows上的安装笔记 ...
- *HDU3172 并查集
Virtual Friends Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 关于ps中的锯齿
1.1 索引透明颜色与Alpha透明通道 要说索引颜色透明,首先要讲讲什么是索引颜色,百度百科上有对索引颜色的解释,我觉得很关键的一句是“挑选一副图片中最有代表性的若干种颜色(通常不超过256种) ...
- JS学习总结(新手)
1. JS面向对象 http://www.cnblogs.com/JavascriptDream/p/5064976.html a. Prototype 属性的理解 b. 遗传继承函数 functio ...
- 《UML大战需求分析》阅读笔记03
活动图是用来表达流程的最常见的一种图.活动图与我们之前熟知的流程图相似.而活动图基础语法包含:初始状态.结束状态.活动.状态和合并一般活动图就有一个开始状态.进行活动图绘制的时候需要从总体上规划好业务 ...
- [dpdk] 熟悉SDK与初步使用 (二)(skeleton源码分析)
接续前节:[dpdk] 熟悉SDK与初步使用 (一)(qemu搭建实验环境) 程序逻辑: 运行参数: 关键API: 入口函数: int rte_eal_init(int argc, char **ar ...