使用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內部的東西可以用自己框架或者自己的類來實現上傳的功能,這里只是一個示例