1. 图片上传的php 代码
<?php
session_start();
$number = isset($_POST['typename'])? $_POST['typename'] : '';
$_SESSION['id'] = $number;
$response = array();
$_SESSION['count']=count($_FILES['image']['name']);
for($i=0;$i<count($_FILES['image']['name']);$i++) {
$type=$_FILES['image']['type'];
$__filename = time() .rand(). substr($_FILES['image']['name'][$i], strrpos($_FILES['image']['name'][$i], '.'));
$filename = './picture/' . $__filename;
if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $filename)) {
$file_name = image($__filename,$type);
$session=$_SESSION['id'];
insert1($session,$file_name,$__filename);
}
else
{
echo '上传失败';
}
}
function insert1($session,$file_name,$__filename)
{
include 'conn.php';
$p="INSERT INTO `photo`(`Tid`, `Tphotoslt`, `Tphotoname`) VALUES ('".$session."','".$file_name."','".$__filename."')";
mysqli_query($con,$p);
echo '上传成功';
}
function image($images,$type)
{
for($i=0;$i<count($type);$i++)
{
if($type[$i]=='image/jpeg')
{
$image=imagecreatefromjpeg("./picture/".$images);//新建1.png 图片
}
else{
if($type[$i]=='image/gif')
{
$image=imagecreatefromgif("./picture/".$images);//新建1.png 图片
}
else{
if($type[$i]=='image/png')
{
$image=imagecreatefrompng("./picture/".$images);//新建1.png 图片
}
}
}
}
$width=imagesx($image);//获取原图的width
$height=imagesy($image);//获取原图的height
if($width>2500 && $height>1500)
{
$thumb_width=$width*0.1;//缩略图的$thumb_width 的 width
$thumb_height=$height *0.1;///缩略图的$thumb_height 的 height
}
else
{
if($width>1500 && $height>1000)
{
$thumb_width=$width*0.2;//缩略图的$thumb_width 的 width
$thumb_height=$height *0.2;///缩略图的$thumb_height 的 height
}
else
{
if($width>800 && $height>800)
{
$thumb_width=$width*0.3;//缩略图的$thumb_width 的 width
$thumb_height=$height *0.3;///缩略图的$thumb_height 的 height
}
else{
$thumb_width=$width*0.4;//缩略图的$thumb_width 的 width
$thumb_height=$height *0.4;///缩略图的$thumb_height 的 height
}
}
}
$thumb=imagecreatetruecolor($thumb_width,$thumb_height);//创建一个原图一半大小的画布
imagecopyresampled($thumb,$image,0,0,0,0,$thumb_width,$thumb_height,$width,$height);//将原图按指定大小复制到画布上,得到缩略图
imagejpeg($thumb,"./picture/img_".$images);//将缩略图保存在文件里
imagedestroy($thumb);//清除占用的内存
return 'img_'.$images;
}
?>
2. html 上次界面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="Backstage.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="form1" id="form1">
<select name="typename" id="typename">
<option>--请选选择--</option>
</select>
<br>
<br>
<span>+文件上传</span>
<input type="file" value="" name="image[]" id="image" multiple="multiple">
<br> <br>
</form>
<button>
上传图片
</button>
<div id="upload">
</div>
<script>
function $(id) {
return document.querySelector(id);
}
//查看图片显示
$('#image').addEventListener('change',function () {
if(typeof FileReader== "undefined")
{
alert("检测到你的浏览器不支持FileReader对象!");
}
var strHTML="";
var file=this.files;
for(var inti=0,len=file.length;inti<len;inti++)
{
var tmpFile=file[inti];
var reader=new FileReader();
reader.readAsDataURL(tmpFile);
reader.onload=function (e) {
strHTML=strHTML+"<span>";
strHTML=strHTML+"<img src='"+e.target.result+"' width='200px' height='200px' alt=''/>";
strHTML=strHTML+"</span>";
$("#upload").innerHTML="<li>"+strHTML+"</li>";
}
}
});
//获取图片的分类
var image =function() {
var oReq = new XMLHttpRequest();
oReq.onreadystatechange = function () {
if (oReq.readyState == 4) {
if (oReq.status == 200) {
//console.log(oReq.responseText);
var json=JSON.parse(oReq.responseText);
typename(json);
}
}
};
oReq.open("POST", "typename.php");
oReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oReq.send(null);
};
image();
//循环分类数据
function typename(data) {
var option;
for(var i=0,len=data.length;i<len;i++)
{
option=document.createElement('option');
option.setAttribute('value',data[i]['Tid']);
option.appendChild(document.createTextNode(data[i]['Tname']));
$('#typename').appendChild(option);
}
}
//上传图片显示 formdata
$('button').addEventListener('click',function () {
var form = $("#form1");
var formData = new FormData(form);
if(formData.getAll('typename')=="--请选选择--")
{
alert('请选择类型上传');
return;
}
var oReq = new XMLHttpRequest();
oReq.onreadystatechange = function () {
if (oReq.readyState == 4) {
if (oReq.status == 200) {
console.log(oReq.responseText);
/// var json=JSON.parse(oReq.responseText);
}
}
};
oReq.open("POST", "backstage.php");
oReq.send(formData);
return false;
});
</script>
</body>
</html>