multiple多图选择，借助FormData通过ajax实现上传

<html>
<head><script>var files;var url = "/upp_w_picpath/3g_xhr.php";function getPath(fileQuery){var i;files =fileQuery.files;var imgContainer=document.getElementById("imgPanel");for(i=0;i<files.length;i++){var reader = new FileReader();var  filename=files[i].name;reader.onload =(function(filename){return function(e){var obj=document.createElement("tr");obj.innerHTML="<td><img title='"+filename+"' src='"+e.target.result+"' style='width:100;height:100;' /></td><td " +" style='vertical-align:bottom;'>"+filename+"</td>";imgContainer.appendChild(obj);};})(filename);reader.readAsDataURL(files[i]);}}function getvl(obj){getPath(obj);}function submitImg(){for(var j=0;j<files.length;j++){var xhr = new XMLHttpRequest ();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304)               //200:Success.304:Tell browser to read cache.{alert(xhr.responseText);}}}var boundary = "------" + new Date () .getTime ();xhr.open ("post", url, true );var formData = new FormData ();formData.append("name", "nik22"); formData.append ("upfile", files[j]);xhr.send (formData);}}</script>
</head>
<body><form enctype="multipart/form-data" action="" method="post"id="upform"><div id="text" style="color:#f00;"></div>选择图片：<input type="file" name="upfile[]" id="upfile"  multiple="multiple" οnchange="getvl(this)" /><table id="imgPanel"></table><input type="button" value="上传" /></form>
</body>
</html>

<?phpecho "No. files uploaded : ".count($_FILES['upfile']['name'])."<br>";$uploadDir = "p_w_picpaths_xhr/";/**for ($i = 0; $i < count($_FILES['upfile']['name']); $i++) {echo "File names : ".$_FILES['upfile']['name'][$i]."<br>";$ext = substr(strrchr($_FILES['upfile']['name'][$i], "."), 1);// generate a random new file name to avoid name conflict$fPath = md5(rand() * time()) . ".$ext";echo "File paths : ".$_FILES['upfile']['tmp_name'][$i]."<br>";$result = move_uploaded_file($_FILES['upfile']['tmp_name'][$i],$uploadDir . $fPath);if (strlen($ext) > 0){echo "Uploaded ". $fPath ." succefully. <br>";}}echo "Upload complete.<br>"*/if($_FILES['upfile']['size'] == 0)die("<script>alert('请选择您要上传的图片！');history.go(-1);</script>");$p_w_picpathinfo = getp_w_picpathsize($_FILES['upfile']['tmp_name']);if($p_w_picpathinfo[0] > 1200 || $p_w_picpathinfo[1] > 800)die("<script>alert('图片大小不符合标准(长1200宽800)！');history.go(-1);</script>");if($p_w_picpathinfo[2] < 1 || $p_w_picpathinfo[2] > 3)die("<script>alert('图片只能是GIF,JPG,PNG格式！');history.go(-1);</script>");//$p_w_picpathinfo[2] 的值得于1,表示是gif格式， 2是jpg格式,3是pngif($p_w_picpathinfo[2] == 1){$p_w_picpathinfo[2] = ".gif";}elseif($p_w_picpathinfo[2] == 2){$p_w_picpathinfo[2] = ".jpg";}else{$p_w_picpathinfo[2] = ".png";}//文件名:把时间和文件名的md5值组合，加上后缀得到文件名。$randval = rand();$imgname = date("YmdHis").substr(md5($randval),0,5).$p_w_picpathinfo[2];copy($_FILES['upfile']['tmp_name'],  $uploadDir.$imgname) or die("move img error!");echo "Upload succefully.<br>";
?>

注：1）上面的php文件放到文件夹upp_w_picpath下，同时在php所在文件夹新建文件夹p_w_picpaths_xhr，用于存

放上传的图片；

2）如果不通过ajax上传图片，那么将html页面中的form的action设置为/upp_w_picpath/3g_xhr.php，

提交按钮的type设置为submit,同时将php文件中的注释的那段去掉注释，同时将它后面的代码

注释掉，就可以实现同时提交多个图片。

转载于:https://blog.51cto.com/woodpecker/1352780

multiple多图选择，借助FormData通过ajax实现上传相关推荐

html5 ajax 文件上传,html5+FormData 实现ajax文件上传
大家都知道在html4时代,上传只能使用表单post提交方式,无法使用ajax(XMLHttpRequest )直接进行表单提交.但在HTML 5的概念形成后,W3C开始考虑标准化XMLHttpReq ...
点击button按钮打开file选择图片并使用ajax图片上传并预览
最近有个需求让人很无奈,每条记录都需要让用户上传图片.由于使用插件无法准确的定位到那条记录,只好使用ajax上传图片准确获取id 先将file文件隐藏掉,通过点击button打开file选择图片,一些 ...
使用FormData进行Ajax请求上传文件
Servlet3.0开始提供了一系列的注解来配置Servlet.Filter.Listener等等.这种方式可以极大的简化在开发中大量的xml的配置.从这个版本开始,web.xml可以不再需要,使用相 ...
ashx获取input file 文件_通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
ssm使用Ajax的formData进行异步图片上传返回图片路径，并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单<form id= "uploadForm" enctype="multipart/ ...
koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
ajax文件上传data,ajax文件上传-FormData()
HTML: JS: $("input[type='button']").on('click', upfile); /** * [upfile 文件上传] * @return {[O ...
ORM中的事务和锁、Ajax异步请求和局部刷新、Ajax文件上传、日期时间类型的Json、多表查询图书系统
一.ORM中的事务和锁事务事务要确保原子性 """ 事务ACID原子性:不可分隔的最小单位一致性:跟原子性是相辅相成隔离性:事务之间相互不干扰持久性:事务一旦确认永久 ...
PHP + ajax 实现上传进度条、PHP 上传大视频
一.PHP + ajax 实现上传进度条 1.1 CSS 样式根据自身调整哦! .processBar{display: inline-block;width: 0;height: 7px;left ...
ajax实现上传文件的进度,基于Ajax技术实现文件上传带进度条
1.概述在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...

multiple多图选择，借助FormData通过ajax实现上传

multiple多图选择，借助FormData通过ajax实现上传相关推荐

最新文章

热门文章