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."'}"; ?>