ajaxFileUpload+php圖片上傳預覽

後臺是利用SWFUpload上傳圖片，是flash+js的組合，若是不用chrome，常常會提示flash版本太低用不了，感受仍是很不方便的。

這裏總結了一利用js ajax上傳的插件列表： 7 JAVASCRIPT AJAX FILE UPLOAD PLUGINS

jQuery插件之ajaxFileUpload 原理都是建立隱藏的表單和iframe而後用JS去提交，得到返回值。

前臺作的時候有一個坑，以前是用的$('element').change()來獲取事件，可是onchange事件只會被觸發一次，網上有提到解決的辦法是live('change')，惋惜項目jquery太舊並不支持，也不敢隨意升級。因此只能直接在input中加入onchange=「function()」來實現。

這裏有關於onchange事件的詳細講解:input的onchange事件實際觸發條件與解決方法

1、當input捕獲到焦點後，系統儲存當前值

2、當input焦點離開後，判斷當前值與以前存儲的值是否不等，若是爲true則觸發onchange事件。

##前臺代碼 瀏覽器本身的file input比較醜，因此通常都display:none而後下面加一個<a onclick=「fileID.click()」>

function uploadRear() {
		$.ajaxFileUpload({
			url:'{url:/ucenter/ajax_addr_identity_upload}',
			secureuri:false,
			fileElementId: 'strPhotoRear1',
			dataType: 'json',
			success: function (data) {
				if(data.error == '200'){
					$("#img-r").attr('src', '{url:/' + data.data + '}');
					$('input[name="card_id_reverse"]').val(data.data);
					$('#strPhotoRear1').val();
				} else {
					art.dialog({
						content: data.data
					});
				}
			}
		});
	}

##php後臺代碼 利用了一個IUpload的類，foreach $_FILES，檢查擴展名和圖片木馬，而後再上傳。 先要了解PHP預約義變量$_FILES的格式：

Array
(
    [file1] => Array
        (
            [name] => MyFile.txt (comes from the browser, so treat as tainted)
            [type] => text/plain  (not sure where it gets this from)
            [tmp_name] => /tmp/php/php1h4j1o
            [error] => UPLOAD_ERR_OK  (= 0)
            [size] => 123   (the size in bytes)
        )

    [file2] => Array
        (
            [name] => MyFile.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/php/php6hst32
            [error] => UPLOAD_ERR_OK
            [size] => 98174
        )
)

這是在input name爲file1和file2的狀況，若是是寫爲file[img1],file[img2]，則處理爲了如下模式（官方文檔推薦了diverse_array(）的trick）：

Array
(
    [file] => Array
        (
            [name] => Array
                (
                    [img1] => MyFile.txt
                    [img2] => MyFile.jpg
                )
        ...

controller中的代碼，返回處理後的消息給前臺：

public function ajax_addr_identity_upload(){
        $file_dir = 'upload/addr_identity/';
        $uploader = new IUpload('5120'); //5M
        $sub_dir = date('Y') . '/' . date('m') . '/'. date('d');
        $uploader->setDir(trim($file_dir, '/') . '/' . $sub_dir);
        $res = $uploader->execute();
        //判斷文件上傳並生成數據
        if ((isset($res['picfront']) && $res['picfront'][0]['flag'] == 1) || (isset($res['picback']) && $res['picback'][0]['flag'] == 1)) {
            $return['error'] = '200';
            $return['data'] = empty($res['picfront'][0]['fileSrc']) ? $res['picback'][0]['fileSrc'] : $res['picfront'][0]['fileSrc'];
            $size = filesize($result['data']) / 1024;
            $code = new Config('code_config');
            $max_size = $code->card_id_max_size;
            if($size > $max_size){
                $proportion = number_format(($max_size/$size)*100);
                $this->createThumb($return['data'], $proportion);
            }
        }
        else
        {
            $return['error'] = '301';
            $return['data'] = '上傳失敗';
        }
        echo json_encode($return);exit();
    }

IUpload類中比較關鍵的方法

public function setDir($path,$chmod=0777){
    $dir = is_dir($path) or (self::mkdir(dirname($path),$chmod) and mkdir($path,$chmod));
    $dir = strtr($dir,'\\','/');
    $this->dir = substr($dir,0,-1)=='/' ? $dir : $dir.'/';
}
public function execute(){
    //總的文件上傳信息
    $info = array();
    foreach($_FILES as $fid => $file) {
            $fileInfo = array();
             //不存在上傳的文件名
            if(!isset($_FILES[$fid]['name']) || $_FILES[$fid]['name'] == '')
            {
            	continue;
            }
            //上傳控件爲數組格式 file[]格式
            if(is_array($_FILES[$fid]['name'])){
                 $keys = array_keys($_FILES[$fid]['name']);
                 foreach($keys as $key) {
                    //調用成員檢查上傳類型，pathinfo(）獲取
                    $fileInfoArray = pathinfo($_FILES[$fid]['name'][$key]);
                     #code 檢查上傳大小 $_FILES[$field]['size'][$key] 
                     #code 圖片木馬檢測
                     #開始上傳 is_uploaded_file/mkdir/move_upload_file(tmp_name,dir+name)
                 }
           } else{
                //非文件數組上傳方式
                #$fileInfo[0]['name'] = $_FILES[$field]['name'];
           }
            $info[$fid] = $fileInfo;   
    }