实例:
效果:
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" οnclick="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" οnclick="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); }