xtJS?4 有一個非常方便的文件上傳組件，可以用來將文件上傳到服務器。本文PHP教程UncleToo將介紹使用PHP和ExtJS實現文件上傳功能。

? ? ? ?首先，創建文件上傳組件Ext.form.Panel，并添加一個上傳按鈕及按鈕單擊事件，該事件將驗證并提交表單到upload.php的文件?？聪旅娲a：

?

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); } ?>

選擇要上傳的文件，并點擊上傳按鈕，效果如下：

轉載于:https://www.cnblogs.com/xred/p/5686712.html

總結

以上是生活随笔為你收集整理的PHP+ExtJS 文件上传示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。