上传表单(Upload Forms)
<div style="padding: 10px; width: 100%; line-height: 2; height: 230px;">ExtJs的文件上传功能官方的例子中并没有，但做网站的都知道，这个功能在十个系统中九个可能都需要这样的功能。废话少说，下面一起来分享一下ExtJs上传文件功能。效果图1（上传前）：
http://extjs.org.cn/screen_capture/demo/8.3_upload_forms_1.jpg
效果图2（上传后）：
http://extjs.org.cn/screen_capture/demo/8.3_upload_forms_2.jpg
该程序包括三个文件，一个文件件。如下图
http://extjs.org.cn/screen_capture/demo/8.3_upload_forms_3.jpg
源代码：
upload.html
以下为引用的内容：
<html><head> <title>Uploading</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="upload.js"></script> <link rel="stylesheet" type="text/css" href="forms.css"/> <!-- Common Styles for the examples --> <link rel="stylesheet" type="text/css" href="../examples.css"/></head><body><script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --><h1>Upload with Forms</h1><p>The js is not minified so it is readable. See <a href="upload.js">upload.js</a>.</p><p> </p><p><a href="javascript:window.location.reload();">reload</a></p></body></html>
Upload.js 以下为引用的内容：
Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side'; Ext.onReady(function() {var form = new Ext.form.FormPanel({ baseCls: 'x-plain', labelWidth: 80, url:'upload.php', fileUpload:true, defaultType: 'textfield', items: [{ xtype: 'textfield', fieldLabel: 'File Name', name: 'userfile', inputType: 'file', allowBlank: false, blankText: 'File can\'t not empty.', anchor: '90%'// anchor width by percentage }]});var win = new Ext.Window({ title: 'Upload file', width: 400, height:200, minWidth: 300, minHeight: 100, layout: 'fit', plain:true, bodyStyle:'padding:5px;', buttonAlign:'center', items: form, buttons: [{ text: 'Upload', handler: function() { if(form.form.isValid()){ Ext.MessageBox.show({ title: 'Please wait', msg: 'Uploading...', progressText: '', width:300, progress:true, closable:false, animEl: 'loding' }); form.getForm().submit({ success: function(form, action){ Ext.Msg.alert('Message from extjs.org.cn',action.result.msg); win.hide(); }, failure: function(){ Ext.Msg.alert('Error', 'File upload failure.'); } }) } } },{ text: 'Close', handler:function(){win.hide();} }]});win.show();});
upload.php
以下为引用的内容：
<?php
//上传文件全称
$uploadfile = "upload_files/".basename($_FILES['userfile']['name']);
$message = "";
if (@move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
$message = "File was successfully uploaded.";
}
else
{
$message = "Possible file upload attack!";
}
print "{success:true,msg:'".$message."'}";
?>
还需要在当前目录创建一个文件夹upload_files，并将该文件夹设置为777(everyone 可读写).
演示地址：http://extjs.org.cn/extjs/examples/form/upload.html
页:
[1]