上傳文件點擊後顯示圖片

實例：

效果：

html:

<div class="file_picture_d">
   <div class="file_picture_l_d file_cont_d">
      <div id="yingye">
                  <img class="img3" src='__PUBLIC__/business/images/register_file_bg.png'>
      </div>
                             <input name="photo3" type="hidden" id="E_Img3" value="" />
               <input type="file" onclick="uploadImg(3)" style="" id="photo3"/>
               <span>營業執照證書</span>
   </div>
   <div class="file_picture_r_d file_cont_d">
      <div id="shangpiao">
                  <img class="img4" src='__PUBLIC__/business/images/register_file_bg.png'>
      </div>
                             <input name="photo4" type="hidden" id="E_Img4" value="" />
               <input type="file"  onclick="uploadImg(4)" style="" id="photo4"/>
               <span>品牌商標證書</span>
   </div>
   
</div>

uploadImg(1) 就是有多張圖片、來傳參數、方便 賦值圖片地址，我們上面加了一個隱藏域、上傳照片ajax請求到後臺、然後後臺上傳，然後把上傳圖片的地址發送到前端、前端接收url 、顯示到對應的img 、隱藏域保存地址、然後再提交後臺保存到數據庫中

pcUploadImg(1);
function pcUploadImg(num){

    document.getElementById('photo' + num).onchange = function(){

        var img = event.target.files[0];

        // 判斷是否圖片
        if(!img) return false;
        //判斷圖片大小
        if (num ==1 || num ==2) {
            if (img.size > (2 * 1024 * 1024)) {
                dialog1('請上傳在2MB以內的圖片');
                return false;
            }
        }
        if (num == 3) {
            if (img.size > (100 * 1024)) {
                dialog1('請上傳在100KB以內的圖片');
                return false;
            }
        }
        // 判斷圖片格式
        if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$/.test(img.name)) ){
            dialog1('圖片只能是jpg,gif,png');
            return false;
        }

        var reader = new FileReader();
        reader.readAsDataURL(img);

        reader.onload = function(e){ // reader onload start
            // ajax 上傳圖片
            $.post("{:U('Login/taskImgUpload')}", { img: e.target.result, imgname : img.name},function(ret){
                if(ret.img != ''){
                    $(".img"+num).attr("src", ret.img);
                    $("#E_Img"+num).val(ret.img);
                }else{
                    dialog1('上傳失敗');
                    return false;
                }
            },'json');
        } // reader onload end
    }
}

	//彈出信息框

  function dialog1(text){

	}

php代碼：

$img = $_POST['img'];//
// 獲取圖片
list($type, $data) = explode(',', $img);
if(strstr($type,'image/png')){
    $ext = '.png';
}elseif(strstr($type,'image/jpg')){
    $ext = '.jpg';
}elseif(strstr($type,'image/gif')){
    $ext = '.gif';        //獲取圖片後綴
}
//獲取文件名
$imgName = explode('.',$_POST['imgname']);

$imgName = $imgName[0];

//生成文件名
$new_imgName = md5($imgName).$ext;

//圖片存放目錄
$rootDir = __ROOT__ . 'public/business';

$twoDir = '/images/'.date('ymd',time()).'/';

$save_dir = $rootDir.$twoDir; //

//創建目錄

if(!$this->mkdirs($save_dir)){
    $ret = array('img' => '', 'info' => "上傳失敗", 'status' => 0);
    echo json_encode($ret);
    exit;
}

//判斷文件是否存在
$fileName = $save_dir . $new_imgName;
if(!file_exists($fileName)){
    // 生成文件
    file_put_contents($fileName, base64_decode($data), true);
}

// 返回給客戶端

$newPhoto = '/public/business' . $twoDir . $new_imgName; //新圖片
$ret = array('img' => $newPhoto, 'info' => "上傳成功", 'status' => 1);
echo json_encode($ret);

//判斷目錄是否存在 不存在則創建
function mkdirs($dir, $mode = 0777)
{
    if (is_dir($dir) || @mkdir($dir, $mode)) return TRUE;
    if (!mkdirs(dirname($dir), $mode)) return FALSE;
    return @mkdir($dir, $mode);
}