图片上传预览不需要三方插件代码工具

最新推荐文章于 2022-05-06 09:10:00 发布

天步

最新推荐文章于 2022-05-06 09:10:00 发布

阅读量691

点赞数

分类专栏：脚本 php 文章标签：图片插件源代码上传预览多图片上传

本文链接：https://blog.csdn.net/sn_qmzm521/article/details/52709565

版权

php 同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

脚本

31 篇文章 0 订阅

订阅专栏

上传图片带预览效果源代码

图片上传预览代码，不需要借助第三方插件，jquery部分改写为Js，可以把jquery都省略掉，缺点是当数据非常多时，未上传的图片，也会存储到服务器。服务器空间大，可以忽略此不足。

1. 页面代码部分

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<scriptsrc="jquery.js"></script>

<scriptsrc="jquery.min.js"></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>

$(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>";

}

vardb='<?php echo $picName;?> ';

parent.charu(db);

</script>

</body>

天步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传预览不需要三方插件代码工具

图片上传预览代码，不需要借助第三方插件，jquery部分改写为Js，可以把jquery都省略掉，缺点是当数据非常多时，未上传的图片，也会存储到服务器。服务器空间大，可以忽略此不足。
复制链接

扫一扫

专栏目录