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