php上传图片到服务器的前端和php代码前端 代码使用 extjs 3.4
uploadPhotoWindow=Ext.extend(Ext.Window,{
title:" 上传图片UploadPhoto",
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 = newExt.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=https://www.04ip.com/post/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( )}});
推荐阅读
- 手机电脑怎么跨屏互联显示,手机电脑怎么跨屏操作
- 包含jquery如何判断复选框是否选中的词条
- 棋牌即时策略游戏,棋牌即刻
- 区块链是基石吗,区块链是基石吗知乎
- linux命令重启系统 重启命令 linux
- 直播会员收入是什么收入,主播会员
- 投屏声音怎么调到电视机,投屏声音怎么投到电视上
- 花椒直播和虎牙有什么关系,虎牙和花椒主播收入哪个高
- phpcsv大量数据 php 读取csv文件