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 ...
随机推荐
- python操作日期和时间的方法
不管何时何地,只要我们编程时遇到了跟时间有关的问题,都要想到 datetime 和 time 标准库模块,今天我们就用它内部的方法,详解python操作日期和时间的方法.1.将字符串的时间转换为时间戳 ...
- OS X El Capitan的 U 盘制作过程
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 0.在 AppStore 下载 OS X El Capitan AppStore ...
- 不注册Activex 直接调用它
此处的Activex是ATL方式的. [ComVisible(false)] [ComImport, InterfaceType(ComInterfaceType.InterfaceIsIUnk ...
- 使用express-generator初始化你的项目目录
express 4.x以后将express命令独立到 express-generator包中,所以想使用express初始化项目目录,可以npm install express-genrator ...
- 【转载】Linux 信号列表
转自:http://blog.csdn.net/muge0913/article/details/7322710 信号及其简介 信号是一种进程通信的方法,他应用于异步事件的处理.信号的实现是一种软中断 ...
- ubuntu12.04下root启动wireshark报错解决办法
在ubuntu11.10以后版本中发现,安装wireshark后用root权限启动,弹出如下错误: Running as user “root” and group “root”. This coul ...
- java 打印流(PrintStream)
打印流(PrintStream):打印流可以打印任意类型的数据,而且打印流在打印数据之前会将数据转为字符串在进行打印 PrintStream可以接受文件和其他字节输出流,所以打印流是对普通字节输出流的 ...
- Java 开发环境的搭建
配置JDK安装路径 1——JAVA_HOME 2——CLASSPATH 配置类库文件位置(特别注意:路径前面的”. “ 代表当前路径,分号用来区分路径) 3——PATH ...
- Django 基本命令
1. 新建一个 django project django-admin.py startproject project-name 一个 project 为一个项目,project-name 项目名称, ...
- Junit测试 - Spring的配置
第一种: @ContextConfiguration(locations = {"classpath*:/spring-core.xml"}) public class UserM ...