Question

php上传图片到服务器的前端和php代码

网上找了很多代码，每次都报错

Answer 1

前端 代码  使用 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;
	}
}