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."'}";
?>
分享到：
相关推荐
这可能涉及到服务器端的技术，如PHP、Java、Node.js等，以及处理文件上传的库，例如PHP的PHP-UploadProgress，Java的Commons FileUpload，或者Node.js的multer。 在实现后台框架时，还需要考虑安全性，比如防止跨站...
在客户端，我们可以使用`Ext.form.FileField`或`Ext.form.Basic`中的`fileUpload`配置来创建一个文件选择器。当用户选择文件后，使用`Ext.Ajax.request`或`Ext间接`提交文件到服务器。在提交过程中，通常会使用`...
Ext3_FileUpload是基于JavaScript库ExtJS 3.x版本的一个组件，主要用于实现Web应用程序中的文件上传功能。在ExtJS框架中，它提供了用户友好的界面和便捷的API，使得开发者可以轻松地集成文件上传到自己的应用程序中...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有ViewState，没有JavaScript，没有CSS，没有...
注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...