ajax 异步插入图片到数据库(多图上传)

时间:2021-05-30 08:31:32

    额 大概就这么个样子。。。截个图

ajax 异步插入图片到数据库(多图上传)

点浏览  选择几张图片 选择完了 确定一下 然后插入数据库 同时在页面中显示插入的图片,代码 也没啥。看下

index.php

 

<html>
<head>
<title>多图上传来咯</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://www.freejs.net/demo/99/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.freejs.net/demo/99/js/jquery.wallform.js" type="text/javascript"></script>



<script>
$(document).ready(function() {

$('#photoimg').die('click').live('change', function() {
//$("#preview").html('');

$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){

console.log('ttest');
$("#imageloadstatus").show();
$("#imageloadbutton").hide();
},
success:function(){
console.log('test');
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
},
error:function(){
console.log('xtest');
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
} }).submit();


});
});
</script>


</head>
<body>

<div id='preview'>
</div>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
<h1>请选择图片上传,多图片可以上传</h1>
<div id='imageloadstatus' style='display:none'><img src="img/gd.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photos[]" id="photoimg" multiple="true" />
</div>
</form>


</div>



</body>
</html>



ajaximageupload.php



<?php
error_reporting(0);
session_start();
include('conn.php');

$session_id='1'; //$session id
define ("MAX_SIZE","90000000");
function getExtension($str)
{
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}


$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{

$uploaddir = "/DoExercise/uploadimgs/image/"; //a directory inside
foreach ($_FILES['photos']['name'] as $name => $value)
{

$filename = stripslashes($_FILES['photos']['name'][$name]);
$size=filesize($_FILES['photos']['tmp_name'][$name]);
//get the extension of the file in a lower case format
$ext = getExtension($filename);
$ext = strtolower($ext);

if(in_array($ext,$valid_formats))
{
if ($size < (MAX_SIZE*1024*10))
{
$image_name=time().$filename;
echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
$newname=$uploaddir.$image_name;
echo $newsname;
if (move_uploaded_file($_FILES['photos']['tmp_name'][$name],$_SERVER['DOCUMENT_ROOT'].$newname))
{
$time=time();
mysql_query("INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");
}
else
{
echo '<span class="imgList">你已经超过了尺寸限制! so moving unsuccessful! </span>';
}

}
else
{
echo '<span class="imgList">你已经超过了大小限制!</span>';

}

}
else
{
echo '<span class="imgList">Unknown extension!</span>';

}

}
}

?>

就这些吧 想点击提交按钮 再提交也行 ,那就加个判断呗。什么时候点击确定按钮 触发了事件 就再走insert呗。
额 源码也有,找我就行 ,认准大白驴