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


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

$session_id='1'; //$session iddefine ("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呗。额 源码也有，找我就行 ，认准大白驴

转载于:https://www.cnblogs.com/HoverM/p/4821741.html

ajax 异步插入图片到数据库（多图上传）相关推荐

js图片前端压缩多图上传（旋转其实已经好了只是手机端有问题要先压缩再旋转）...
var filechooser = document.getElementById("choose");// 用于压缩图片的canvasvar canvas = document. ...
antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等
组件涉及到 vue3.2.vite.Ant Design Vue 3.2.16.Windi CSS样式库.vuedraggable-es拖拽库等组件功能图片拖拽多图上传自定义图片加载样式自定 ...
Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...
微信朋友圈的图片上传，多图上传怎么去撸才合适？我们一起来实现吧！
微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多 ...
多图上传乱序php,discuz图片顺序混乱解决方案_php技巧
说明 discuz在发表帖子的时候,添加多张图片,然后直接发表帖子,图片顺序有时候会乱掉即使上传图片窗口中图片顺序正确,发布之后还是会乱掉分析看url,程序代码中看不出什么将图片名改为序号上传 ...
续《用最简单的例子实现jQuery图片即时上传》之多图上传实现
本用例主要含两个文件(index.html.submit_form_process.php),一个文件夹(files/).特别的,files中含一个报错图片error.jpg,jquery库引用了外链 ...
js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
ci php做多图上传,CodeIgniter快速实现图片上传
本例仅演示上传图片功能,程序中未对部分数据做严格检查与限制.若要用于生产环境,请自行增加相关功能. 一.上传图片的视图文件 $base_url=$this->config->item(&q ...

ajax 异步插入图片到数据库（多图上传）

ajax 异步插入图片到数据库（多图上传）相关推荐

最新文章

热门文章