JQ上傳預覽+存數據庫

時間 2019-12-06

原文原文鏈接

由於以前老師講的方法有很多BUG 如今通過完善已經修復javascript

以前總是講的方法是每一張都會被傳到後臺文件夾裏面去致使在預覽過程當中若是刷新頁面那麼預覽的圖片不能從後臺文件夾中刪除 php

這個方法實如今本地預覽只要不點上傳就不會存後臺文件夾因此這個方法仍是比較科學的 css

若是有什麼問題歡迎你們留言指教！html

下面是代碼：java

<!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>

　上傳處理頁面代碼：jquery

<?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>

添加數據庫代碼：web

算了不傳了太簡單。。。。　　ajax