php 图片上传并预览效果

if(!isset($_session))session_start();

/**2010-6-22
 * $data 数组类型    包含以下变量
 -------------------------------
 * $sub_type        submit类型(upload:上传按钮    delete:删除按钮),默认upload
 * $file            通过表单获取的$_files['filename']数组
 * $img_tag_id        预览图片的<img>的id值
 * $img_dir            上传图片的目录
 * $max_file_size    单位m(兆),默认:1m
 * $type_array        允许的上传的图片类型(默认:image/pjpeg、image/jpeg、image/gif)
 **/
function upload($data){
    if(!$data['file']){
        echo '<script>alert("file不能为空!");</script>';exit;
    }
    if(!$data['img_tag_id']){
        echo '<script>alert("预览图片标签id不能为空!");</script>';exit;
    }
    if(!$data['img_dir']){
        echo '<script>alert("图片上传目录不能为空!");</script>';exit;
    }
    if(!isset($data['max_file_size'])){
        $data['max_file_size'] = 1024 * 1024;
    }else{
        $data['max_file_size'] = $data['max_file_size'] * 1024 * 1024;
    }
    if(!isset($data['type_array'])){
        $data['type_array'] = array('image/pjpeg', 'image/jpeg', 'image/gif');
    }
    if(!isset($data['sub_type'])){
        $data['sub_type'] = 'upload';
    }

    $imgpath = '';
    if(isset($data['sub_type']) && $data['sub_type'] == 'delete'){
        if(isset($_session['name']) && $_session['name']){
            if(is_file($_session['imgpath'])){
                $b = unlink($_session['imgpath']);
            }
            unset($_session['name'], $_session['imgpath']);
            if(!isset($_session['name'])){
                echo '<script>alert("删除成功!");</script>';
                echo '<script>parent.document.getelementbyid("'.$data['img_tag_id'].'").style.display = "none";</script>';
            }else{
                echo '<script>alert("删除失败!");</script>';
            }
        }else{
            echo '<script>alert("没有稿件!");</script>';
        }exit;
    }

    if(isset($_session['imgpath']) && $_session['imgpath']){
        echo '<script>alert("稿件已经存在,要想重新上传请删除原来的稿件!");</script>';exit;
    }
    if(!in_array($data['file']['type'], $data['type_array'])){
        echo '<script>alert("稿件类型不匹配,请上传.jpg、.gif和.png格式的图片!");</script>';exit;
    }
    if($data['file']['size'] > $data['max_file_size']){
        echo '<script>alert("您上传的稿件过大,请选择2m以下的图片上传!");</script>';exit;
    }

    if(!is_dir($data['img_dir'])){
        @mkdir($data['img_dir'], 0777, true);
    }
    $imgpath    = $data['img_dir'].'/'.date('his', time()).rand(100, 999).$data['file']['name'];
    $isupload    = move_uploaded_file($data['file']['tmp_name'], $imgpath);
    if(!$isupload){
        echo '<script>alert("稿件上传失败,请尝试重新上传!");</script>';exit;
    }else{
        echo '<script>alert("稿件上传成功!");</script>';
    }
    $_session['name']        = $data['file']['name'];
    $_session['imgpath']    = $imgpath;

    return $imgpath;
}

/*test_start*/
$sub_type = '';
if(isset($_post['submit_upload']))$sub_type = 'upload';
if(isset($_post['submit_delete']))$sub_type = 'delete';
if($sub_type){//echo '<script>alert("'.$sub_type.'");</script>';exit;
    $data = array(    'sub_type'        => $sub_type,
                    'file'            => $_files['file'],
                    'img_tag_id'    => 'picview',
                    'img_dir'        => 'upload_img',
                  );
    $imgpath = upload($data);
}else{
    $imgpath = isset($_session['imgpath'])? $_session['imgpath']: '';
}
?>

<form action="ad.php" method="post" enctype="multipart/form-data" target="frame">
    <input type="file" name="file" class="input">
    <input type="submit" name="submit_upload" value="上  传">
    <input type="submit" name="submit_delete" value="删  除">
    <iframe id="frame" name="frame" width="0" height="0" marginwidth="0" frameborder="0" src="about:blank"></iframe>
</form>

<img id="picview" height="100" style="display:none;">

<script>
if("<?php echo $imgpath; ?>"){
    parent.document.getelementbyid("picview").src = "<?php echo $imgpath; ?>";
    parent.document.getelementbyid("picview").style.display = "block";
}
</script>

时间: 2024-09-08 05:08:05

php 图片上传并预览效果的相关文章

Asp.net图片上传实现预览效果的简单代码

这篇文章介绍了Asp.net图片上传实现预览效果的简单代码,有需要的朋友可以参考一下   在页面上放入一个上传控件和一个图片控件. 复制代码 代码如下:  <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>         <asp:Image ID="Image1" runat="

asp.net文件图片上传带预览效果

asp教程.net文件图片上传带预览效果 图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像. 程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素. 程序有以下几种预览方式: simple模式:直接从file的value获取图片路径来显示预览,适用于ie6: filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8: domfile模式:调用file的getAsDataURL

jQuery+HTML5实现图片上传前预览效果_jquery

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧. 注意事项 (1).如果页面没有显示"browse"按钮,则说明你的'uploader' : '<%=basepath%>images/uploadify.swf'配置不对,检查下路径是否正确. (2).如果需要修改按钮的图片:可以使用'buttonimg'配置进行替换 (3).上传完成后,'oncomplete'事件

jquery 图片上传本地预览效果代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net /1999/xhtml" > <head>     <meta http-

Android图片上传实现预览效果_Android

首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片  3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollG

thinkphp jquery实现图片上传和预览效果_php技巧

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

Android图片上传实现预览效果

首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片 3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollGr

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

  这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码,非常的简单实用,效果也很棒,有需要的小伙伴可以参考下. 网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21