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