梦想还是要有的, 万一实现了呢?

AJAX无刷新上传图片 可以实时预览

HTML 拈花古佛 7168℃ 0评论 繁體

区别一般的上传,一般的上传要点击上传按钮,本例无按钮,选择图片后就自动上传

预 览

<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="scripts/jquery.form.js"></script>  
  
<script type="text/javascript" >  
 $(document).ready(function() {   
          
            $('#photoimg').live('change', function()            {   
                       $("#preview").html('');  
                $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');  
            $("#imageform").ajaxForm({  
                        target: '#preview'  
        }).submit();  
          
            });  
        });   
</script>  
<div style="width:600px">  
  
	<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>  
	上传 <input type="file" name="photoimg" id="photoimg" />  
	</form>  
	<div id='preview'>  
	</div>  
  
</div>
<?php  
session_start();  
$session_id='1'; //$session id  
$path = "../upload/";  
  
    $valid_formats = array("jpg", "png", "gif", "bmp");  
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")  
        {  
            $name = $_FILES['photoimg']['name'];  
            $size = $_FILES['photoimg']['size'];  
              
            if(strlen($name))  
                {  
                    list($txt, $ext) = explode(".", $name);  
                    if(in_array($ext,$valid_formats))  
                    {  
                    if($size<(1024*1024))  
                        {  
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;  
                            $tmp = $_FILES['photoimg']['tmp_name'];  
                            if(move_uploaded_file($tmp, $path.$actual_image_name))  
                                {  
                                  
                                      
                                    echo "<img src='../upload/".$actual_image_name."'  class='preview'>";  
                                }  
                            else  
                                echo "failed";  
                        }  
                        else  
                        echo "Image file size max 1 MB";                      
                        }  
                        else  
                        echo "Invalid file format..";     
                }  
                  
            else  
                echo "Please select image..!";  
                  
            exit;  
        }  
?>

 

转载请注明:拈花古佛 » AJAX无刷新上传图片 可以实时预览

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址