使用ajax异步提交表单

虽然这篇文章的标题是提交表单,但是主要的难点在于使用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内部的东西可以用自己框架或者自己的类来实现上传的功能,这里只是一个示例