extjsajax上傳文件
A. extjs ajax 可以上傳文件嗎
文件上傳的Ajax，首先Ajax並不支持流的傳輸，只是在裡面套了個iframe。
//ajax上傳
Ext.get('btn').on('click',function(){
Ext.Ajax.request({
url:'Upload.php',
isUpload:true,
form:'upform',
success:function(){
Ext.Msg.alert('upfile','文件上傳成功！');
}
});
});
<formid="upform">
請選擇文件：<inputtype="file"name="imgFile"/>
<inputtype="button"id="btn"value="上傳"/>
</form>
<?php
if(!isset($_FILES['imgFile'])){
echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上傳文件的文件名
$type=$upfile["type"];//上傳文件的類型
$size=$upfile["size"];//上傳文件的大小
$tmp_name=$upfile["tmp_name"];//上傳文件的臨時存放路徑
$error_cod=$upfile["error"];
if($error_cod>0){
echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$photo_tmp_file_name=//這里設置存放路徑
move_uploaded_file($tmp_name,$photo_tmp_file_name);//存儲文件
?>
B. extjs怎麼使圖片上傳時顯示預覽
這個我做過，不難，思路給你
1.是當文本框內容發生改變的時候就將圖片上傳到伺服器（如果圖片小，用戶是感覺不到你已經做了上傳操作的。）
2.當伺服器接受到這個圖片的時候，將其放入到一個臨時文件夾中並返回給前台一個圖片路徑（圖片流也可以）。
3.Ajax請求會有一個相應，在伺服器端成功接受到上傳的圖片後，返回給Ajax一個Reponse，這個Reponse里包含一個圖片路徑。
4.ExtJS在前台獲取success里的responseText之後（也就是圖片路徑）將默認圖片的src指向從後台反饋回來的圖片路徑。
現在圖片就會現實出來
流程是：
用戶選擇圖片-->
觸發文本框改變事件--->
在事件中通過AJAX將圖片上傳給伺服器--->
伺服器將圖片名稱修改為UUID以免重復，並將此圖片的路徑返回給前台--->
前台AJAX請求的回調函數中獲取responseText，也就是圖片路徑--->
設置默認圖片的src為responseText---->
用戶重新選擇的時候（例如用戶不喜歡這張圖）--->
在文本框改變事件中通過AJAX將圖片上傳（包括先前上傳的圖片名稱）--->
後台根據參數先刪除臨時圖片--->
重復以上的步驟直到用戶確定
需要注意的問題：
1.當用戶改變了圖片之後，需要把上一次的臨時圖片文件刪除掉，以免出現垃圾圖片過多。
2.每次上傳圖片的時候要在後面跟上一個隨機參數（因為如果請求路徑和參數相同，瀏覽器不會再繼續發送請求）。通常情況下使用new Date()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()
3.圖片太大的話，效果不是很好。
4.當用戶點擊確定後，將臨時文件里的圖片放置到你的正式圖片存放目錄下即可。
5.圖片上傳到後台使用UUID改名字，否則可能有重復
C. 我想用extjs實現上傳和下載
給你上傳代碼，下載在服務端實現
重點是 xtype: 'filefield',
*************************************************************************
*上傳框組件
*
************************************************************************
*/
Ext.define('Mocoolka.web.coreview.container.MKUploadForm', {
extend:'Ext.form.Panel',
frame: true,
autoScroll: true,
initComponent: function () {
var me = this;
me.title = getUIWithID("SystemUI.Buttons.Upload.Description");//'上傳',
me.items = [
{
xtype: 'filefield',
emptyText: getUIWithID("SystemUI.MKUploadForm.SelectFile.Description"),//'選擇一個文件',
name: 'filename',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},
];
me.buttons = [{
text: getUIWithID("SystemUI.Buttons.Upload.Description"),//'上傳',
handler: function () {
var form = this.up('form').getForm();
var action = this.up('form').mkaction;
var myaction = "import";
if (action.get("Name") == "ImportAttachment")
myaction = "ImportAttachment";
var url = mkruntimer.getDataManager().getUrlPath(myaction, action);
if (form.isValid()) {
form.submit({
url: url,
waitMsg: getUIWithID("SystemUI.Buttons.Uploading.Description"),//'上傳中...',
success: function (fp, o) {
var form1 = form.owner;
form1.mkcallout(form1.mkcalloutpara, action.result.children);
form1.up('window').close();
},
failure: function (form, action) {
mkerrorutil.processAjaxFailure(action.response);
}
});
}
}
}, {
text: getUIWithID("SystemUI.Buttons.Reset.Description"),//'重設',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: getUIWithID("SystemUI.Buttons.Cancel.Description"),//'取消',
handler: function () {
this.up('window').close();
}
},
{
text: getUIWithID("SystemUI.MKUploadForm.AddFile.Description"),//'增加一個文件',
handler: function () {
this.up('form').addFile();
}
}
]
me.callParent(arguments);
},
addFile: function () {
var me = this;
me.add({
xtype: 'filefield',
emptyText: getUIWithID("SystemUI.MKUploadForm.SelectFile.Description"),//'選擇一個文件',
fieldLabel: getUIWithID(""),// '文件',
name: 'filename',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
});
},
//standardSubmit:false,
bodyPadding: '10 10 0',
flex:1,
defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: 50
},
region: 'center',
});
D. php上傳圖片到伺服器的前端和php代碼
<?
require_once('../classfile/guid.class.php');
if(!isset($_FILES['imgFile'])){
echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上傳文件的文件名
$type=$upfile["type"];//上傳文件的類型
$size=$upfile["size"];//上傳文件的大小
$tmp_name=$upfile["tmp_name"];//上傳文件的臨時存放路徑
$error_cod=$upfile["error"];
if($error_cod>0){
echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$ext_file_name="";
switch($type){
case'image/pjpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/jpeg':
$okType=true;
$ext_file_name =".jpg";
break;
case'image/gif':
$okType=true;
$ext_file_name =".gif";
break;
case'image/png':
$okType=true;
$ext_file_name =".png";
break;
}
if(!$okType){
echojson_encode(array("success"=>false,'msg'=>"Notimage"));
return;
}
$web_root="D:".DIRECTORY_SEPARATOR."Easy2PHP5".DIRECTORY_SEPARATOR."webSiteJfz".DIRECTORY_SEPARATOR;
$photo_tmp_path=$web_root."img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp";
$temp_file_name=creat_guid(0).$ext_file_name;
$photo_tmp_file_name=$photo_tmp_path.DIRECTORY_SEPARATOR.$temp_file_name;
$photo_tmp_file_scr="img".DIRECTORY_SEPARATOR."userimg".DIRECTORY_SEPARATOR."temp".DIRECTORY_SEPARATOR.$temp_file_name;
move_uploaded_file($tmp_name,$photo_tmp_file_name);
echojson_encode(array("success"=>true,'msg'=>"ok","file_name"=>$photo_tmp_file_name,"file_scr"=>$photo_tmp_file_scr));
//echojson_encode(array("success"=>false,'msg'=>json_encode($_FILES['imgFile'])));
return;
?>
guid.class.php//生成唯一的圖片文件名
<?
functioncreat_guid($long){
$uuid="";
if(function_exists('com_create_guid')){
$uuid=com_create_guid();
}else{
mt_srand((double)microtime()*10000);//optionalforphp4.2.0anp.
$charid=strtoupper(md5(uniqid(rand(),true)));
$hyphen=chr(45);//"-"
$uuid=chr(123)//"{"
.substr($charid,0,8).$hyphen
.substr($charid,8,4).$hyphen
.substr($charid,12,4).$hyphen
.substr($charid,16,4).$hyphen
.substr($charid,20,12)
.chr(125);//"}"
//return$uuid;
}
if(!isset($long)||$long==0){
returnsubstr($uuid,1,strlen($uuid)-2);
}else{
return$uuid;
}
}