虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容,
在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需要直接上传图片到图片服务器中,这就产生了一个跨域post提交文件的问题,很显然jquery本身jsonp只支持get方式的异步提交肯定是不行
其中也尝试过使用ifrmae的方法来提交数据,在网上有,但是效果不理想,并且也很复杂的样子,最后选择出了jquery.from.js 这个插件,可以实现异步的表单提交,
先是客户端代码的html文件
主要加载两个文件 juery 和 jquery.from.js
代码如下
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<form id="myform" method="post" action="http://images.byshop.com/wechat/imgFormUpload" enctype="multipart/form-data">
<input type="file" name="userfile[]" multiple id="img_file">
<input type="submit" value="shangchuan">
</form>
<input type="button" value="ajax_submit" onclick="imgFormUpload()">
<script>
function imgFormUpload() {
$("#myform").ajaxSubmit({
dataType: 'json',
success: function (data) {
alert("submit success");
}
});
}
</script>
服务端php代码
<?php
header("Access-Control-Allow-Origin: *");
defined('BASEPATH') OR exit('No direct script access allowed'); /**
* 微信方法控制器
*
* @author azhw
* @create_tiem 2015-07-17
* @edit_time 2015-07-20
* @editer azhw
*/
class Wechat extends CI_Controller { function __construct() {
parent::__construct();
$this->load->helper(array('dir', 'url'));
} public function imgFormUpload(){
$re_arr = array();
if(isset($_FILES['userfile']['tmp_name']) && isset($_POST['path']) && isset($_POST['filename'])){
$tmp_name = $_FILES['userfile']['tmp_name'];var_dump($tmp_name);
$filename = $_POST['filename'];
$filename_arr = explode(',', $filename);
$path = $_POST['path'];
if(count($tmp_name) === count($filename_arr)){
mkdirs(FCPATH.$path);//这是如果不存在就递归创建目录的函数
for($i = 0; $i < count($tmp_name); $i++){
move_uploaded_file($tmp_name[$i], FCPATH.$path.$filename_arr[$i]);
}
$re_arr['code'] = 1;
$re_arr['response'] = 'success';
}
else{
$re_arr['code'] = 100101;
$re_arr['response'] = '文件数量和文件名称数量不统一';
}
}
else{
$re_arr['code'] = 100100;
$re_arr['response'] = '丢失关键参数';
}
// $re_arr['code'] = 100101;
// $re_arr['response'] = '文件数量和文件名称数量不统一';
echo json_encode($re_arr);
}
}
这段代码中需要注意的是header("Access-Control-Allow-Origin: *"); 异步ajax需要这个头信息
if(isset($_FILES['userfile']['tmp_name']) && isset($_POST['path']) && isset($_POST['filename'])){...} 这里判断的稍微有点多,我的path 和filename都是从客户端传递来的参数
move_uploaded_file($tmp_name[$i], FCPATH.$path.$filename_arr[$i]); 关于for内部的东西可以用自己框架或者自己的类来实现上传的功能,这里只是一个示例