微擎实现form表单数据和图片一起上传

微擎实现form表单和图片一起上传

最近在做一个项目，涉及到注册，需要表单数据和图片一起上传，我用的微擎自带的file_upload()函数。

需要下载 jQuery.upload.min.js 放到路径目录，然后引入到script标签
不多说，直接放代码~

实例代码：

html页面：

<form class="form1" action="add" method="post" enctype="multipart/form-data" >
	<div class="inz">
		彩票站店名：<input type="text" id="shopname" name = 'shopname'/>
	</div>	
	<div class="inz">
		商店联系人名字：<input type="text" id="username" name = 'username'/>
	</div>
	<div class="inz">
		商店联系方式：<input type="text" id="telephone" name = 'telephone'  />
		<br />
		<span id="q" style="color: red;"></span>
	</div>
	<div class="inz">
		商店地址：<input type="text" id="address" name = 'address'/>
	</div>
	<div class="inz">
		<input type="hidden" name="MAX_FILE_SIZE" value="200000">
        商店门头照片：<input type="file" name="image" id="images">
	</div>
	<!-- 设置隐藏域，保存后台返回来的图片上传后的地址 -->
	<input type="hidden" id="imageInfo" name="imageInfo">
	<button id='str' value="注册" οnclick="register()" >注册</button>
</form>

js端：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./resource/js/lib/jQuery.upload.min.js"></script>
<script type="text/javascript"> 
	
	$(document).ready(function(){
		//给上传的id加一个change事件，进行ajax
		$('#images').change(function(){
			//获取图片信息
			var file = this.files[0];
			console.log(file);
			//实例化FormData函数，将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接
			var formData = new FormData(); 
			formData.append('file',file); //添加图片信息参数
			$.ajax({
				 dataType:'json',
				 url: "{php echo $this->createMobileUrl('info', array('m'=>'sweep_code', 'to'=>'imageInfo'));}",
				 type: 'POST',
				 cache: false, //上传文件不需要缓存
				 data: formData,
				 processData: false, // 告诉jQuery不要去处理发送的数据
				 contentType: false, // 告诉jQuery不要去设置Content-Type请求头
				 success: function (data) {
					 if(data.code == 200){
						 //返回的地址保存在隐藏域，以便于在表单提交时获取数据
						 $("#imageInfo").val(data.info.path);
					 }
				}
			})
		});
	});
	
	//表单提交
	$('#str').click(function(){
		//表单获取，序列化数据
	  var inputData = $(".form1").serialize();
	  $.ajax({
		  dataType:'json',
		  data:inputData,
		  type:'post',
		  url:"{php echo $this->createMobileUrl('info', array('m'=>'sweep_code', 'to'=>'infoUser'));}",
		  success:function(data){
			  console.log(data)
		 	if (data.status == 'success') {
		 		alert(data.msg);
				location.href="{php echo $this->createMobileUrl('station', array('m'=>'sweep_code', 'to'=>'centre'));}";
		 	} else {
		 		alert(data.msg);
		 	}
		 }
	  });
	});
	
</script>

php后台代码：

//图片信息处理
public function imageInfo(){
	$arr = $_POST;
			//加载系统公共函数， 加载文件为 framework/function/file.func.php
	load()->func('file');
	$datas = $_FILES;
	//此处调用微擎自带的文件上传函数
	$res = file_upload($_FILES['file'], 'image', '');
	if($res){
		//返回图片路径
		echo json_encode(array("code"=>200,"msg"=>"上传成功","info"=>$res));
	}
}
//表单提交
public function infoUser(){
	$arr = $_POST;
	$user_data = array(
		'shopname' => $arr['shopname'],
		'username' => $arr['username'],
		'address' => $arr['address'],
		'telephone' => $arr['telephone'],
		'type' => 2,
		'headimgurl' => $arr['imageInfo'],
		'create_date' => date("Y-m-d H:i:s"),
	);
	//添加数据到数据库
	$result = pdo_insert('lottery_users', $user_data);
	if($result){
		$result = array('status'=>'success', 'code'=>'200');
		$result['msg'] = '恭喜注册成功！';
		echo json_encode($result);
	}else{
		$result = array('status'=>'error', 'code'=>'001');
		$result['msg'] = '注册失败！';
		echo json_encode($result);
	}
}

到这里，就大功告成了！！！