单张图片上传预览【超简洁，未完待续】

http://www.cnblogs.com/ordinaryk/p/6277451.html

1.单张图片上传之前前端预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<form>
<input type="file" name="mingzi" id="pic"/>
<input id="tijiao" type="button"   value="提交">
</form>
<div id="tu" style=" width:200px; height:300px; background-color:#0FF; background-image:url(y1.png)"></div>
<body>
<script>
var y = document.getElementById("pic");//上传文件
var mi = 123;
var yi = document.getElementById("tu");//预览图片的div
var tijiao = document.getElementById("tijiao");
y.onchange=function(){
	var wj = y.files[0];//获取文件信息(这里不能作为全局变量放在函数外面，因为再次运行该函数的时候函数外的是不运行的)
if(wj.size<200000)
{
	if(wj.type=='image/png')//判断文件类型
	{
	
	if( window.URL)//建立一個可存取到該file的url
		{
		var ul = window.URL.createObjectURL(wj);
		}
		else if(window.createObjectURL)
		{
			var ul = window.createObjectURL(wj);
		}
		else if(window.webkitURL)
		{
		var ul = window.webkitURL.createObjectURL(wj);
		
		}
		yi.style.backgroundImage="url("+ul+")";//这个地址和正常用的不太一样但是非常有效
		if(tijiao.getAttribute("disabled")=="disabled")
			{
				tijiao.removeAttribute("disabled");
			}
		
	}
	else{
		alert("文件格式不正确");
		if(tijiao.getAttribute("disabled")!="disabled")
			{
				tijiao.setAttribute("disabled","disabled");
			}
		}
}
else
{
	alert("文件太大");
	if(tijiao.getAttribute("disabled")!="disabled")
	{
		tijiao.setAttribute("disabled","disabled");
	}
}
}
</script>
</body>
</html>

处理界面：

<?php
include("DBDA.class.php");
$mingzi = $_FILES['mingzi'];
var_dump($mingzi);
$lujing = "./pic/".date("YmdHis").$mingzi["name"];//创建路径（这里可以给原图片改名）
move_uploaded_file($mingzi["tmp_name"], $lujing);//把图片储存到创建的路径下面
$db = new DBDA();
$str = "insert into tupian values('','我','{$lujing}')";//图片存到数据库
$db->Query($str,0);
//显示数据库的图片
$stb = "select * from tupian";
$shuzu = $db ->Query($stb);
foreach($shuzu as $v)
{
	echo "<img src='{$v[2]}'/>";
}
?>

　DBDA封装类

<?php
class DBDA
{
    public $host="localhost";
    public $uid = "root";
    public $pwd = "123";
    public $dbname = "test";
    
    //成员方法
    public function Query($sql,$type=1)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $r = $db->query($sql);
        
        if($type==1)
        {
            return $r->fetch_all();
        }
        else
        {
            return $r;
        }
    }
    
    //返回字符串的方法
    public function StrQuery($sql,$type=1)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $r = $db->query($sql);
        
        if($type==1)
        {
            $attr = $r->fetch_all();
            $str = "";
            foreach($attr as $v)
            {
                $str .= implode("^",$v)."|";
            }
            
            return substr($str,0,strlen($str)-1);

        }
        else
        {
            return $r;
        }
    }
    
    
    
    //返回JSON
    function JSONQuery($sql,$type=1)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $r = $db->query($sql);
        
        if($type==1)
        {
            return json_encode($r->fetch_all(MYSQLI_ASSOC));
             
        }
        else
        {
            return $r;
        }
    }
    
    function JSONAQuery($sql,$type=1)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $r = $db->query($sql);
        
        if($type==1)
        {
            return json_encode($r->fetch_all());
             
        }
        else
        {
            return $r;
        }
    }
    
    
}

DBDA.class.php

JQ 方法：

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple /><br><img src="" id="img0" >
</form>
<script>    
$("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl) {
        $("#img0").attr("src", objUrl) ;
    }
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null ; 
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
</script>
</body>
</html>

ＪＱ

来源：https://www.cnblogs.com/ordinaryk/p/6506740.html

标签

传照片

var