JQ上传预览+存数据库

因为之前老师讲的方法有不少BUG 现在经过完善已经修复

之前老是讲的方法是每一张都会被传到后台文件夹里面去 导致在预览过程中如果刷新页面 那么预览的图片不能从后台文件夹中删除 

这个方法实现在本地预览只要不点上传 就不会存后台文件夹 所以这个方法还是比较科学的  

 

如果有什么问题欢迎大家留言指教!

 

下面是代码:

<!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>
<script src="jquery-1.11.2.min.js"></script>
</head>

<style>
	#uploadPreview {
    width: 168px;
    height: 168px;                          
    background-position: center center;
    background-size: cover;
    border: 4px solid #fff;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
</style>
<body>
	
<form action="chuli.php" method="post" enctype="multipart/form-data"target="shangchuan">
<input type="hidden" name="tp" value="" id="tp" />

<div id="uploadPreview"></div>


<input id="uploadImage" type="file" name="file" class="fimg1" onchange="PreviewImage();" />
 <input id="aa" type="submit" value="上传" />       
</form>
<iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe>
	
</body>
</html>

<script type="text/javascript">
function showimg(u)
{     
    var a1 = u;	
	$.ajax({
	url:"add1.php",
	data:{a1:a1},
	type:"POST",
	dataType:"text",
	success:function(data){
			if(data=="1")
			{
				alert("添加成功");
				window.location.href="asd.php";
			}
			else
			{ 
				alert("");	
			}
			
		}
	})     
}

$("aa").click(function(){
	showimg(url);
})


	$("#uploadImage").on("change", function(){
		
	
    // Get a reference to the fileList
    var files = !!this.files ? this.files : [];
    // If no files were selected, or no FileReader support, return
    if (!files.length || !window.FileReader) return;
 
    // Only proceed if the selected file is an image
    if (/^image/.test( files[0].type)){
 
        // Create a new instance of the FileReader
        var reader = new FileReader();
 		
        // Read the local file as a DataURL
        reader.readAsDataURL(files[0]);
 
        // When loaded, set image data as background of div
        reader.onloadend = function(){
  
       $("#uploadPreview").css("background-image", "url("+this.result+")");
       
        }
 
    }
 
});




</script>

 上传处理页面代码:

<?php
if($_FILES["file"]["error"])
{
    echo $_FILES["file"]["error"];
}
else
{
    if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)
    {
        $fname = "./imgg/".date("YmdHis").rand(100,1000).$_FILES["file"]["name"];  
         
        $filename = iconv("UTF-8","gb2312",$fname);
         
        if(file_exists($filename))
        {
            echo "<script>alert('该文件已存在!');</script>";
        }
        else
        {
          
           move_uploaded_file($_FILES["file"]["tmp_name"],$filename); 
           echo "<script>parent.showimg('{$fname}');</script>";                        
        }
         
    }
    else
    {
    	echo "<script>alert('图片大小超过1M!');</script>";
    }
}

//<title>图片上传预览处理</title>

添加数据库代码:

算了不传了 太简单。。。。  

 

posted @ 2017-05-05 17:54  小太白  阅读(980)  评论(0编辑  收藏  举报