这里需要php文件进行处理,将上传的图片保存到服务器上。相应的图片保存路径,php文件路径需要对应修改。
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var imagebox = new Ext.Component({
autoEl: {//一个标签名或者 DomHelper 描述,用来创建 Element ,它将封装当前组件。
style: 'width:200px;height:200px;margin:0px auto;border:1px solid #ccc; text-align:center;padding:5px;margin-bottom:10px',
tag: 'div',
id: 'imageshow',
html: '暂无图片'
}
});
var file = new Ext.form.TextField({
name:'imgFile',
fieldLabel:'文件上传',
inputType:'file',//可取值类型radio,text,password,file
allowBlank:false,
blankText:'请浏览图片'
});
var btnsubmitclick = function () {
if (form.getForm().isValid()) {
form.getForm().submit({
url: 'php/Upload.php',
waitMsg:'正在上传图片',
// method:'POST',
params: {
ACTION: 'img',
imgFile: form.getForm()
},
success: function(form, action) {
var result = action.result,data=result.data;
var path = data['path'];
var img = '<img style="width:190px;height:190px;padding:0px;" src="' + path + '"/>';
imagebox.update(img,true);
Ext.MessageBox.alert('提示',result.msg);
},
failure: function(form,action) {
// var response = Ext.decode( request.responseText );
//do nothing
Ext.MessageBox.alert('提示',action.result.msg);
}
});
}
}
var btnresetclick = function(){
form.getForm().reset();
}
var form = new Ext.form.FormPanel({
frame:true,
fileUpload:true,
title:'表单标题',
style:'margin:10px',
items:[imagebox,file],
buttons:[{
text:'保存',
handler:btnsubmitclick
},{
text:'重置',
handler:btnresetclick
}]
});
var win = new Ext.Window({
title:'窗口',
width:476,
height:374,
resizable:true,
modal:true,
closable:true,
maximizable:true,
minimizable:true,
buttonAlign:'center',
items:form
});
win.show();
});
</script>
</body>
</html>
Upload.php
<?php
$action = $_FILES['imgFile'];
if ($_FILES['imgFile']["error"] > 0) {
$error = $_FILES['imgFile']["error"];
$return_data = array(
'success' => false,
'msg' => $error
);
} else {
$file_name = $_FILES['imgFile']['name'];
$file_type = $_FILES['imgFile']['type'];
$file_tmpname = $_FILES["imgFile"]["tmp_name"];
$file_size = round($_FILES['imgFile']['size'] / 1024, 2) . " KB"; // round() 函数对浮点数进行四舍五入。
if (($file_type == 'image/gif') || ($file_type == 'image/jpg') || ($file_type === 'image/jpeg')) {
if (file_exists("upload/" . $file_name)) {
$return_data = array(
'success' => false,
'msg' => 'The picture is already exist!'
);
} else {
move_uploaded_file($file_tmpname, 'upload/' . $file_name);
$return_data = array(
'success' => true,
'data' => array(
'name' => $file_name,
'size' => $file_size,
'path' => "php/upload/" . $file_name,
'type' => $file_type
),
'msg' => 'The picture Upload success!'
);
}
}
}
echo json_encode($return_data);
?>
效果图: