上传文件点击后显示图片

实例：

效果：

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

上传文件点击后显示图片

猜你喜欢