FormData自定義上傳圖片

由於前段時間的項目中 涉及到圖紙的上傳 前端大神很隨意的扔給我一個頁面 讓我自己修修改改 找了好幾個素材站都沒有找到合適的上傳插件 最后不得已 用formdata 寫了一個 順便記錄下吧

html 代碼

<li>
    <label class="left">上傳產品圖片：</label>
    <div class="formlisttext" id="feedback">
    　　<a onClick="getElementById('inputfile').click()" class="addpic"><b>+</b><br />添加圖片</a>
    　　<input type="file" onchange=checkImgExt(this.value) multiple="multiple" name="image" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
    　　<small class="long">支持jpeg、jpg、gif、png等圖片格式，單張圖片最大不超過8M。</small>
　　 </div>
</li>

js 代碼

$("#inputfile").change(function(){
            //創建FormData對象
            var data = new FormData();
            //為FormData對象添加數據
            $.each($('#inputfile')[0].files, function(i, file) {
                data.append('upload_file'+i, file);
            });

            //發送數據
            $.ajax({
                url:'url',  //地址自己寫啊
                type:'POST',
                data:data,
                cache: false,
                contentType: false,        //不可缺參數
                processData: false,        //不可缺參數
                success:function(data){
                
                    data = $(data).html();

                    //第一個feedback數據直接append，其他的用before第1個（ .eq(0).before() ）放至最前面。
                    //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 轉換html標簽，否則圖片無法顯示。
                    if($("#feedback").children('img').length == 0)
                        $("#feedback").prepend(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                    else
                        $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                    $(".loading").hide();    //加載成功移除加載圖片
                },
                error:function(err){
//                    alert('上傳出錯');
//                    $(".loading").show();    //加載失敗移除加載圖片
                }
            });
        });

php 代碼

function img(){
    $db = $GLOBALS['db'];
    $ecs = $GLOBALS['ecs'];

    $dir_base = DATA_DIR . '/product_img/' . date('Ymd') . '/';
    if (!file_exists($dir_base)) {
        if (!@mkdir($dir_base, 0755,true)) {
            return false;
        }
    }
    //沒有成功上傳文件，報錯並退出。
     if(empty($_FILES)) {
         echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";
         exit(0);
     }

     $output = "<textarea>";
     $index = 0;        //$_FILES 以文件name為數組下標，不適用foreach($_FILES as $index=>$file)
     foreach($_FILES as $file){
         $upload_file_name = 'upload_file' . $index;        //對應index.html FomData中的文件命名
         $fix = substr(strrchr($_FILES[$upload_file_name]['name'], '.'), 1);
         $filename = base64_encode("product_img_62_48".date('YmdHis')."_".rand(1000,9999)).".".$fix;
         $gb_filename = iconv('utf-8','gb2312',$filename);    //名字轉換成gb2312處理
        //文件不存在才上傳
        if(!file_exists($dir_base.$gb_filename)) {
             $isMoved = false;  //默認
             $MAXIMUM_FILESIZE = 8 * 1024 * 1024;     //文件大小限制    8M = 8 * 1024 * 1024 B;
             $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i";   //取文件后綴

             if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {
                $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //上傳文件
             }
         }else{
                 $isMoved = true;    //已存在文件設置為上傳成功
         }
         if($isMoved){
             $sql = 'INSERT INTO'.$ecs->table('goods_img').'(`img_path`) VALUES '."('$dir_base$filename')";
             $db->query($sql);
             $img_id = $db->insert_id();
             //輸出圖片文件<img>標簽
            //注：在一些系統src可能需要urlencode處理，發現圖片無法顯示，
             //    請嘗試 urlencode($gb_filename) 或 urlencode($filename)，不行請查看HTML中顯示的src並酌情解決。
             $output .= "<div class='thumblist' id='imageDelete{$img_id}' >";
             $output .= "<div class='thumboperate'>";
//             $output .= "<a href='' class='replace'></a>";
             $output .= "<a href='' onclick='imgdelete({$img_id});return false;' class='delete'></a>";
             $output .= "</div>";
             $output .= "<input type='hidden' name='imagepath[]' value='{$img_id}'>";
             $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}' style='width: 62px;height: 48px;'/>";
             $output .= "</div>";
         }else {
             $output .= "<div class='thumblist' >";
             $output .= "<div class='thumboperate'>";
//             $output .= "<a href='' class='replace'></a>";
             $output .= "<a href='' class='delete'></a>";
             $output .= "</div>";
             $output .= "<input type='hidden' name='imagepath[]' value='{$dir_base}{$filename}'>";
             $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}' style='width: 62px;height: 48px;'/>";
             $output .= "</div>";
         }

         $index++;
    }

    echo $output."</textarea>";
}

由於本人比較懶，細節方面就不調了

驗證方法附上

function checkImgExt(filename)
    {
        var flag = false; //狀態 "jpg","png","jpeg","gif"
        var arr = ["jpg","png","jpeg","gif"];
        //取出上傳文件的擴展名
        var index = filename.lastIndexOf(".");
        var ext = filename.substr(index+1).toLowerCase( );
        //循環比較
        for(var i=0;i<arr.length;i++)
        {
            if(ext == arr[i])
            {
                flag = true; //一旦找到合適的，立即退出循環
                break;
            }
        }
        //條件判斷
        if(!flag)
        {
            alert('你上傳的圖片類型不正確');
//            $("#Model").val('');
            return false;
        }
    };