例項：

效果：

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);
}