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 ...
随机推荐
- hg 的使用简介
克隆仓库 仓库是一个目录,它包含所有我们希望保留历史的源代码和这些源代码的历史记录. 克隆就是生产一个仓库的副本,这样可以有一个本地私有的仓库来工作. hg clone http://远程仓库地址:端 ...
- SQL Server中的事物
1.事务的四个属性 原子性Atomicity,一致性Consistency,隔离性Isolation,持久性Durability ,即ACID特性. 原子性:事务必须是一个完整工作的单元,要么全部执行 ...
- [lua]安卓ndk如何编译lua库
这里说的lua库是标准lua库,不包含tolua,不包含cocos2dx的各种lua扩展,是干净的lua. 参考: http://stackoverflow.com/questions/1229965 ...
- 20145220&20145209&20145309信息安全系统设计基础实验报告(4)
20145220&20145209&20145309信息安全系统设计基础实验报告(4) 实验报告链接: http://www.cnblogs.com/zym0728/p/6132246 ...
- HJ-第二周,真机调试
报错: Showing Recent Issues Huiju_app requires a provisioning profile. Select a provisioning profi ...
- A Taxonomy of Parallel Processor Architectures
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION
- 【转】 NGUI 监听按钮除OnClick外其他事件的方法,附简易改编的UIButton类
http://blog.csdn.net/icefantasylcj/article/details/49450555 大家好,我是雨中祈雨.一直以来,CSDN都是我最好的编程助手.这是我在CSDN的 ...
- 月四 周2 ii
今日通过色鸟鸟 以此纪念 不是很想玩红鸟鸟 简单来说因为红鸟鸟结束后,五彩斑斓系列就和我没关系了= = 珍惜为每一部作品感伤的每一刻吧
- mvc 3 Mvc 4 使用Forms 登录验证随笔一
前言 本人虽然做 .Net 也有五年有余,可是没什么大才,总是干些打杂的活,技术很少差劲呀.以前不管是做内部管理系统,还是企业平台,保存用户登录信息用的都是Session,也许是从一开始就接触Sess ...
- surface pro 4 wifi掉线问题
更新你的无线网卡驱动到最新版本15.68.9032.47,重启.或者运行regedit修改注册表 HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\mr ...