因为之前老师讲的方法有不少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>
添加数据库代码：
算了不传了 太简单。。。。