前端 代碼 ?使用 extjs 3.4
uploadPhotoWindow=Ext.extend(Ext.Window,{title:"?上傳圖片?Upload?Photo",
height:420?,
width:600,
closeAction:'close',
modal?:?true,
iconCls:'btn-setting',
buttonAlign:?'center',
upload_ok:false,
haveUpload:false,
initComponent?:?function()?{?
Ext.form.Field.prototype.msgTarget?=?'side';
var?po_no=new?Ext.form.TextField({name:'Po_no',fieldLabel:?'單號?Po?No',itemId:'Po_no',?width:120,allowBlank:?false,?value:this.cur_sele_po_no,?hidden:true});?
var?OP=new?Ext.form.TextField({name:'OP',itemId:'OP',?width:12,
allowBlank:?false,?value:"uploadphoto",?hidden:true});?
var?file_name=new?Ext.form.TextField({name:'photo_file_name',itemId:'photo_file_name',?width:180,
allowBlank:?false,?value:"",hidden:true,});?
var?imagebox?=?new?Ext.BoxComponent({
itemId:'imagebox',
autoEl:?{
tag:?'img',//指定為img標簽?
style:?'height:100%;margin:0px?auto;border:1px?solid?#ccc;?text-align:center;margin-bottom:10px',
src:?'img/userimg/nophoto.jpg'?,//指定url路徑?
}
});
var?form_set_field?=?new?Ext.FormPanel({frame:true,
itemId:'form_set_field',
layout:'form',?
//tableAttrs:?{border:?1},
defaults:{labelAlign:'right',labelWidth:110,bodyStyle:?'padding:0?30px?0?0;',frame:false,layout:'form'},
items:[po_no,OP,file_name,imagebox],
});?
var?file?=?new? Ext.form.TextField({
?name:?'imgFile',
?fieldLabel:?'文件上傳',
?inputType:?'file',
?allowBlank:?false,
?blankText:?'請瀏覽圖片'
}); ?
var?form_set_file?=?new?Ext.FormPanel({frame:true,
fileUpload:?true,
itemId:'form_set_file',
layout:'form',?
//tableAttrs:?{border:?1},
defaults:{labelAlign:'right',labelWidth:110,bodyStyle:?'padding:0?30px?0?0;',frame:false,layout:'form'},
items:[file],
});?
var?btnOK=?new?Ext.Button({text:?'上傳?Upload?',?iconCls:'btn-save',width:70,handler:?function(){
var?form_set=this.ownerCt.ownerCt.getComponent('form_set_file');
var?form_set_field=this.ownerCt.ownerCt.getComponent('form_set_field');
var?po_no=form_set_field.getComponent('Po_no').getValue();
var?file_name=form_set_field.getComponent('photo_file_name');
//alert(po_no);
var?imgbox=form_set_field.getComponent('imagebox');
if?(form_set.getForm().isValid()){form_set.getForm().submit({?
waitMsg?:?'正在上傳數據?Uploading....',waitTitle:'請稍候?waiting....',
url:'php/toolsfile/photoUpload.php',?
method?:?'post',?
success?:?function(form,?action){?
var?out?=?action.result.success;?
if?(out?!=?true){
Ext.Msg.alert('提示?Tips?',?'上傳數據失敗,錯誤信息Save?failure?:'+action.result.msg);
//alert(action.result.msg);
}?else{
//Ext.Msg.alert('提示?Tips?',?'上傳數據成功,服務器信息:?Save?success?'+action.result.msg);
file_name.setValue(action.result.file_name);
imgbox.getEl().dom.src=action.result.file_scr;
form_set.ownerCt.savePhoto();
//form_set.ownerCt.grid.store.load();
//form_set.ownerCt.dateChang=true;
//form_set.ownerCt.destroy(?);
}
},
failure:?function(form,?action)?{
switch?(action.failureType)?{?
case?Ext.form.Action.CLIENT_INVALID:?
Ext.Msg.alert('Failure',?'Form?fields?may?not?be?submitted?with?invalid?values');?
break;?
case?Ext.form.Action.CONNECT_FAILURE:?
Ext.Msg.alert('Failure',?'Ajax?communication?failed');?
break;?
case?Ext.form.Action.SERVER_INVALID:?
Ext.Msg.alert('Failure',?action.result.msg);?
break;
}?
},
});?
}else{
Ext.Msg.alert('提示?Tips?:',?'請選擇文件!?\n?Please?select?Img?file?');
}?
}
});
var?btnCancel?=?new?Ext.Button({text:?'?關閉?Close?',?iconCls:'btn-cancel',width:70,handler:?function(){this.ownerCt.ownerCt.destroy(?)}});
Ext.apply(this,{
items:?[form_set_field,form_set_file],
buttons:?[btnOK,?btnCancel],
});?
uploadPhotoWindow.superclass.initComponent.call(this);?
},
savePhoto:function?(){
//alert(this.cur_sele_po_no);
var?form_set_field=this.getComponent('form_set_field');
var?form_set_file=this.getComponent('form_set_file');
form_set_field.getForm().submit({
waitMsg?:?'上傳成功，正在存儲?saveing....',waitTitle:'請稍候?waiting....',
url:'php/jsonfile/po_nophotolist_json.php',?
method?:?'post',?
success?:?function(form,?action){?
var?out?=?action.result.success;?
if?(out?!=?true){
Ext.Msg.alert('提示?Tips?',?'存儲失敗,錯誤信息Save?failure?:'+action.result.msg);
}?else{
Ext.Msg.alert('提示?Tips?',?'存儲成功,服務器信息:?Save?success?'+action.result.msg);
form_set_file.getForm().reset();
form_set_file.ownerCt.haveUpload=true;
}
},
failure:?function(form,?action)?{
switch?(action.failureType)?{?
case?Ext.form.Action.CLIENT_INVALID:?
Ext.Msg.alert('Failure',?'Form?fields?may?not?be?submitted?with?invalid?values');?
break;?
case?Ext.form.Action.CONNECT_FAILURE:?
Ext.Msg.alert('Failure',?'Ajax?communication?failed');?
break;?
case?Ext.form.Action.SERVER_INVALID:?
Ext.Msg.alert('Failure',?action.result.msg);?
break;
}?
},
});
},
isUpload:function(){
return?this.haveUpload;
}
});
後臺php?photoUpload.php'
<?require_once('../classfile/guid.class.php');
if(!isset($_FILES['imgFile'])){
echo?json_encode(array("success"=>false,?'msg'=>"Not?get?Imgfile"));
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){echo?json_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){?
echo?json_encode(array("success"=>false,?'msg'=>"Not?image?"));
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);?
echo?json_encode(array("success"=>true,?'msg'=>?"ok","file_name"=>$photo_tmp_file_name,"file_scr"=>$photo_tmp_file_scr));
//echo?json_encode(array("success"=>false,?'msg'=>?json_encode($_FILES['imgFile'])));
return;
>guid.class.php?//?生成唯壹的圖片文件名
<?
function?creat_guid($long){
$uuid="";
if?(function_exists('com_create_guid')){
$uuid=com_create_guid();
}else{
mt_srand((double)microtime()*10000);//optional?for?php?4.2.0?and?up.
$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?){
return?substr($uuid,1,?strlen($uuid)-2);
}else{
return?$uuid;
}
}