【ExtJs】ExtJs的文件上傳
來源：程序員人生 發布時間：2015-08-20 08:06:28 閱讀次數：4412次
ExtJs的文件上傳也是采取Ajax的方式，基本上，用戶上傳以后，其結果馬上推回給前臺。下面以1個ExtJs圖片上傳系統，說明這個問題。
1、基本目標
實現以下的1個圖片上傳的系統，不是基本圖片格式，大于1M的圖片不給予上傳，上傳成功顯示圖片，上傳不成功，則顯示毛病信息。
2、基本思想
這個工程的目錄結構以下，
如FileUpload.html的HTML布局所示，js與ext-theme-classic下面皆是Ext的基本資源。然后Upload文件夾用來寄存上傳的圖片，FileUpload.html就是前臺布局頁面，里面有1個直接渲染到<body>標簽的Panel組件，Panel組件中，唯一1個文件域，相當于<input type="file" />。上傳成功以后彈出1個可以關閉的窗口window。photoSubmit.php是上傳文件的后臺處理頁面。
<!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、制作進程
1、FileUpload.html
這個前臺布局頁面還是使用了表單最基本的anchor布局，然后利用了ExtJs的Ajax表單提交方式，這都在《【ExtJs】ExtJs的表單插件與表單布局、提交與驗證》（點擊打開鏈接）已具體講過。記住ExtJs文件域類型是filefield。此panel的底部工作欄還是采取經典的左右空白站位符，中間放1個“肯定”按鈕的布局方式。此按鈕在用戶沒有選擇文件之間是不可用的。
<!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', //此文件傳遞給后臺處理上傳頁面的標識
allowBlank: false, //不允許為空
buttonText: '選擇圖片' //那個上傳按鈕的文字
}],
bbar: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: '肯定',
disabled: true, //沒有通過驗證，此按鈕不可用
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的上傳與否取決與這個頁面打印出來的Json信息。此頁面與《【php】文件的上傳與下載》（點擊打開鏈接）的上傳部份沒有半點區分，使用Jsp的朋友可以參考，《【Servlet】利用Servlet3.0標準與JSTL表達式實現文件上傳系統，支持圖片上傳后顯示》（點擊打開鏈接）；《【Struts2】文件的上傳與上傳權限的控制》（點擊打開鏈接）；使用Asp或.NET的朋友也是1樣的，關鍵是你的后臺頁面處理完上傳的文件以后，和《【ExtJs】ExtJs的表單插件與表單布局、提交與驗證》（點擊打開鏈接）1樣，打印出以下的字符串讓FileUpload.html辨認：
//ExtJs收到此Json則認為上傳成功
{
"success":true,
"msg":"ss" //要捎回前臺的信息
}
//ExtJs收到此Json則認為上傳失敗
{
"success":false,
"msg":"ss" //要捎回前臺的信息
}
因此，便有了以下的php代碼：
<?php
//看是不是是通過正常途徑傳遞1個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"];
//通過對$fileName的處理，就可以夠獲得上傳的文件的后綴名
$fileExtensions=strrchr($fileName, '.');
//這樣就可以夠獲得上傳文件的大小
$fileSize=$_FILES["file"]["size"];
//行將被打印的毛病信息
$errmsg="";
//這里是文件的異常，1般不會出現
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 .= "文件太大！請少于1M！";
$canUpload=false;
}
//如果文件可以上傳
if($canUpload==true){
//保存在
服務器的名字則是時間戳，加文件后綴名
$saveName=time().$fileExtensions;
//獲得
服務器的目錄的絕對路徑。
$basepath=str_replace('','/',realpath(dirname(__FILE__).'/'))."/";
//然后則保存這個上傳文件
move_uploaded_file($_FILES["file"]["tmp_name"],$basepath."/upload/".$saveName);
//打印上傳成功以后的json給正在等待的ExtJsAjax，捎1個圖片的保存地址給它。正常來講，這個地址還應當入庫。
echo "{
'success':true,
'msg':'upload/{$saveName}'
}";
}
else{
//上傳不成功，則捎1個失敗信息給前臺。
echo "{
'success':false,
'msg':'{$errmsg}'
}";
}
?>
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
