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 小太白阅读(991) 评论(0) 收藏举报

小太白

JQ上传预览+存数据库

公告