使用ajax异步提交表单

虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容,

在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需要直接上传图片到图片服务器中,这就产生了一个跨域post提交文件的问题,很显然jquery本身jsonp只支持get方式的异步提交肯定是不行

其中也尝试过使用ifrmae的方法来提交数据,在网上有,但是效果不理想,并且也很复杂的样子,最后选择出了jquery.from.js 这个插件,可以实现异步的表单提交,

先是客户端代码的html文件

主要加载两个文件 juery 和 jquery.from.js

代码如下

 1 <script src="jquery.js"></script>
 2 <script src="jquery.form.js"></script>
 3 <form id="myform" method="post" action="http://images.byshop.com/wechat/imgFormUpload" enctype="multipart/form-data">
 4     <input type="file" name="userfile[]"  multiple id="img_file">
 5     <input type="submit" value="shangchuan">
 6 </form>
 7 <input type="button" value="ajax_submit" onclick="imgFormUpload()">
 8 <script>
 9     function imgFormUpload() {
10         $("#myform").ajaxSubmit({
11             dataType: \'json\',
12             success: function (data) {
13                 alert("submit success");
14             }
15         });
16     }
17 </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内部的东西可以用自己框架或者自己的类来实现上传的功能,这里只是一个示例