【ExtJs】ExtJs的文件上傳
來源：程序員人生 發(fā)布時(shí)間：2015-08-20 08:06:28 閱讀次數(shù)：4417次
ExtJs的文件上傳也是采取Ajax的方式，基本上，用戶上傳以后，其結(jié)果馬上推回給前臺(tái)。下面以1個(gè)ExtJs圖片上傳系統(tǒng)，說明這個(gè)問題。
1、基本目標(biāo)
實(shí)現(xiàn)以下的1個(gè)圖片上傳的系統(tǒng)，不是基本圖片格式，大于1M的圖片不給予上傳，上傳成功顯示圖片，上傳不成功，則顯示毛病信息。
2、基本思想
這個(gè)工程的目錄結(jié)構(gòu)以下，
如FileUpload.html的HTML布局所示，js與ext-theme-classic下面皆是Ext的基本資源。然后Upload文件夾用來寄存上傳的圖片，F(xiàn)ileUpload.html就是前臺(tái)布局頁面，里面有1個(gè)直接渲染到<body>標(biāo)簽的Panel組件，Panel組件中，唯一1個(gè)文件域，相當(dāng)于<input type="file" />。上傳成功以后彈出1個(gè)可以關(guān)閉的窗口window。photoSubmit.php是上傳文件的后臺(tái)處理頁面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<title>extFileUpload</title>
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
<link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
3、制作進(jìn)程
1、FileUpload.html
這個(gè)前臺(tái)布局頁面還是使用了表單最基本的anchor布局，然后利用了ExtJs的Ajax表單提交方式，這都在《【ExtJs】ExtJs的表單插件與表單布局、提交與驗(yàn)證》（點(diǎn)擊打開鏈接）已具體講過。記住ExtJs文件域類型是filefield。此panel的底部工作欄還是采取經(jīng)典的左右空白站位符，中間放1個(gè)“肯定”按鈕的布局方式。此按鈕在用戶沒有選擇文件之間是不可用的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<title>extFileUpload</title>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<script>
Ext.onReady(function(){
Ext.onReady(function(){
var form1 = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
method: 'POST',
layout: 'anchor',
title: '圖片上傳',
items: [{
xtype: 'filefield',
anchor: '100%',
name: 'file', //此文件傳遞給后臺(tái)處理上傳頁面的標(biāo)識(shí)
allowBlank: false, //不允許為空
buttonText: '選擇圖片' //那個(gè)上傳按鈕的文字
}],
bbar: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: '肯定',
disabled: true, //沒有通過驗(yàn)證，此按鈕不可用
formBind: true,
listeners: {
click: function(){
var thisForm = form1.getForm();
thisForm.submit({
url: "photoSubmit.php",
success: function(form, action){
Ext.create('Ext.window.Window', {
title:'上傳成功',
border: false, //沒有邊框
items: [{
xtype: 'image',
src: action.result.msg
}]
}).show();
},
failure: function(form, action){
Ext.create('Ext.window.Window', {
title: '上傳失敗',
border: false, //沒有邊框
items: [{
xtype: 'label',
text: action.result.msg
}]
}).show();
}
});
}
}
}, {
xtype: 'tbfill'
}]
});
})
});
</script>
2、photoSubmit.php
ExtJs的上傳與否取決與這個(gè)頁面打印出來的Json信息。此頁面與《【php】文件的上傳與下載》（點(diǎn)擊打開鏈接）的上傳部份沒有半點(diǎn)區(qū)分，使用Jsp的朋友可以參考，《【Servlet】利用Servlet3.0標(biāo)準(zhǔn)與JSTL表達(dá)式實(shí)現(xiàn)文件上傳系統(tǒng)，支持圖片上傳后顯示》（點(diǎn)擊打開鏈接）；《【Struts2】文件的上傳與上傳權(quán)限的控制》（點(diǎn)擊打開鏈接）；使用Asp或.NET的朋友也是1樣的，關(guān)鍵是你的后臺(tái)頁面處理完上傳的文件以后，和《【ExtJs】ExtJs的表單插件與表單布局、提交與驗(yàn)證》（點(diǎn)擊打開鏈接）1樣，打印出以下的字符串讓FileUpload.html辨認(rèn)：
//ExtJs收到此Json則認(rèn)為上傳成功
{
"success":true,
"msg":"ss" //要捎回前臺(tái)的信息
}
//ExtJs收到此Json則認(rèn)為上傳失敗
{
"success":false,
"msg":"ss" //要捎回前臺(tái)的信息
}
因此，便有了以下的php代碼：
<?php
//看是不是是通過正常途徑傳遞1個(gè)file過來了
if(empty($_FILES["file"])){
//如果不是，則是非正常打開此頁，馬上重定向，假裝這頁不存在
header("location: error.php");
exit;
}
else{
header("Content-type: text/html; charset=utf⑻");
}
//這是判斷是不是上傳的file
$canUpload=true;
//這樣就可以夠獲得上傳的文件名
$fileName=$_FILES["file"]["name"];
//通過對(duì)$fileName的處理，就可以夠獲得上傳的文件的后綴名
$fileExtensions=strrchr($fileName, '.');
//這樣就可以夠獲得上傳文件的大小
$fileSize=$_FILES["file"]["size"];
//行將被打印的毛病信息
$errmsg="";
//這里是文件的異常，1般不會(huì)出現(xiàn)
if($_FILES["file"]["error"]>0){
$errmsg .= "異常：".$_FILES["file"]["error"]."！";
$canUpload=false;
}
//如果上傳的文件名的后綴不是以下的幾種則不能上傳
if($fileExtensions!=".bmp" && $fileExtensions!=".gif" && $fileExtensions!=".jpg" && $fileExtensions!=".jpeg" && $fileExtensions!=".png"){
$errmsg .= "只能上傳圖片類型！后綴名必須為：.bmp,gif,jpg,jpeg,png任1！";
$canUpload=false;
}
//如果上傳的文件大于1M則也不能上傳
if($fileSize>1*1024*1024){
$errmsg .= "文件太大！請(qǐng)少于1M！";
$canUpload=false;
}
//如果文件可以上傳
if($canUpload==true){
//保存在
服務(wù)器的名字則是時(shí)間戳，加文件后綴名
$saveName=time().$fileExtensions;
//獲得
服務(wù)器的目錄的絕對(duì)路徑。
$basepath=str_replace('','/',realpath(dirname(__FILE__).'/'))."/";
//然后則保存這個(gè)上傳文件
move_uploaded_file($_FILES["file"]["tmp_name"],$basepath."/upload/".$saveName);
//打印上傳成功以后的json給正在等待的ExtJsAjax，捎1個(gè)圖片的保存地址給它。正常來講，這個(gè)地址還應(yīng)當(dāng)入庫。
echo "{
'success':true,
'msg':'upload/{$saveName}'
}";
}
else{
//上傳不成功，則捎1個(gè)失敗信息給前臺(tái)。
echo "{
'success':false,
'msg':'{$errmsg}'
}";
}
?>
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
