上传图片带预览效果源代码
图片上传预览代码,不需要借助第三方插件,jquery部分改写为Js,可以把jquery都省略掉,缺点是当数据非常多时,未上传的图片,也会存储到服务器。服务器空间大,可以忽略此不足。
1. 页面代码部分
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>上传图片</title>
<scriptsrc="jquery.js"></script>
<scriptsrc="jquery.min.js"></script>
<script>
functioncharu(str){
document.getElementById("tupian").src= str;
document.getElementById("newpoto").value= str;
document.getElementById("tishi").innerHTML= "";
}
functiontishione(par){
if(par == "1"){
document.getElementById("tishi").innerHTML= "文件不存在";
}
if(par == "2"){
document.getElementById("tishi").innerHTML= "上传文件太大";
}
if(par == "3"){
document.getElementById("tishi").innerHTML= "上传文件格式不对";
}
if(par == "4"){
document.getElementById("tishi").innerHTML= "同名文件已存在";
}
if(par == "5"){
document.getElementById("tishi").innerHTML= "移动文件出错!";
}
}
functiontishitwo(){
document.getElementById("tishi").innerHTML= "上传文件太大";
}
functiontishithree(){
document.getElementById("tishi").innerHTML= "上传文件格式不对";
}
</script>
</head>
<body>
<divalign="center" style="width:50%; height:200px;font-size:13px;" id="fuchuangkou" class="frm">
<h3>上传图片预览</h3>
<formname="myform" id="myform" action="home.php"method="post" enctype="multipart/form-data"target="tarframe">
<fontstyle="letter-spacing:1px" color="#FF0000">*只允许上传jpg|png|bmp|pjpeg|gif格式的图片</font><br/><br/>
请选择图片:
<inputname='potoimg' type='file' id="xuanze" accept="image/jpeg"style="visibility:hidden;position:absolute;top:0px;width:0px"/>
</form>
<iframesrc="" width="250"height="250" style="display:none;"name="tarframe"></iframe>
<imgsrc="" id="tupian"style="width:100px;height:100px;border:1px solid;"/>
<spanid="tishi"></span>
<script>
$(function(){
$('#btn').click(function () {
//触发file的点击事件
$('#xuanze').click();
});
$("#xuanze").change(function(){
document.forms["myform"].submit();
});
})
</script>
<inputtype="button" value="选取" id="btn" style="margin-left:199px;"/>
<formaction="" method="post"enctype="multipart/form-data" name="myform1"id="myform1">
<inputtype="text" id="newpoto" name="newpoto"style="width:300px;"/><!--此处可以改为隐藏域,只需要把值写入数据库即可-->
<inputtype="submit" />
</form>
<?php
var_dump($_POST);
?>
</div>
</body>
</html>
2. 处理图片上传部分
<html>
<head>
<scriptsrc="jquery.min.js"></script>
</head>
<body>
<?php
//全局变量
//$picName="";
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/jpeg');
$max_size='500000'; // 最大文件限制(单位:byte)
$upfile='./image/human';//图片目录路径
@$file=$_FILES['potoimg'];
if($_SERVER['REQUEST_METHOD']=='POST'){ //判断提交方式是否为POST
if(!is_uploaded_file($file['tmp_name'])){//判断上传文件是否存在
echo "<font color='#FF0000'>文件不存在!</font>";
echo"<script>parent.tishione(1);</script>";
exit;
}
if($file['size']>$max_size){ //判断文件大小是否大于500000字节
echo "<font color='#FF0000'>上传文件太大!</font>";
echo"<script>parent.tishione(2);</script>";
exit;
}
if(!in_array($file['type'],$arrType)){ //判断图片文件的格式
echo "<font color='#FF0000'>上传文件格式不对!</font>";
echo"<script>parent.tishione(3);</script>";
exit;
}
if(!file_exists($upfile)){ // 判断存放文件目录是否存在
mkdir($upfile,0777,true);
}
$suijishu=rand(999,9999);
$imageSize=getimagesize($file['tmp_name']);
$img=$imageSize[0].'*'.$imageSize[1];
$fname=$file['name'];
$ftype=explode('.',$fname);
$picName=$upfile."/yijiangtang".time().$suijishu.$fname;
if(file_exists($picName)){
echo "<font color='#FF0000'>同文件名已存在!</font>";
echo"<script>parent.tishione(4);</script>";
exit;
}
if(!move_uploaded_file($file['tmp_name'],$picName)){
echo "<font color='#FF0000'>移动文件出错!</font>";
echo"<script>parent.tishione(5);</script>";
exit;
}
else{
//echo "<script>";
//echo "var db = ".$picName.";";
// echo "parent.charu(db);";
//echo "</script>";
}
}
?>
<script>
vardb='<?php echo $picName;?> ';
parent.charu(db);
</script>
</body>