PHP 多图片上传实例demo
upload.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://c.mfniu.com/js/lib/jquery.js"></script>
<title>多图片上传实例1</title>
</head>
<body>
<div class="upload_btn" onclick="fileElem.click()">选择上传图片</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
<div id="filebox">
<input class="inputimg" type="file" id="fileElem0" name="img[]" multiple="multiple" accept="image/*" onchange="handleFiles(this)">
</div>
<div class="showimgdiv" id="fileList" ></div>
<br><input class="inputimg" type="submit" value="提交">
</form>
<script>
window.URL = window.URL || window.webkitURL;
var fileList = document.getElementById("fileList");
var num = 0;
function handleFiles(obj) {
var sname = 'fileElem'+num;
num++;
var xname ='fileElem'+num;
$('#'+sname).hide();
$('#filebox').append('<input class="inputimg" type="file" id="'+xname+'" name="img[]" multiple="multiple" accept="image/*" onchange="handleFiles(this)">');
if(fileList.childNodes.length>=6){
alert("最多只能上传6张图片哦！");
return false;
}
/* 方法2
if(num>5){
alert("最多只能上传6张图片哦！");
return false;
}
*/
var files = obj.files,
img = new Image();
var div = document.createElement("div");//创建一个DIV
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid #111";
div.style.margin = "2px";
div.style.float = "left";
div.style.boxShadow = " 2px 2px 4px #aaa";
img.src = window.URL.createObjectURL(files[0]);
img.style.width = "100px";
img.style.height = "100px";
img.name="img[]";
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
div.appendChild(img);
fileList.appendChild(div);
}
</script>
</body>
</html>
upload.php
<?php
var_dump($_FILES);
PHP 多图片上传实例demo的更多相关文章
- PHP多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- Thinkphp整合阿里云OSS图片上传实例
Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 < ...
- PHP结合zyupload多功能图片上传实例
PHP结合zyupload多功能图片上传实例,支持拖拽和裁剪.可以自定义高度和宽度,类型,远程上传地址等. zyupload上传基本配置 $("#zyupload").zyUplo ...
- layui加tp5图片上传实例
<div class="layui-fluid"> <div class="layui-row"> <form class=&qu ...
- webuploader项目中多图片上传实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- asp.net图片上传实例
网站后台都需要有上传图片的功能,下面的例子就是实现有关图片上传. 缺点:图片上传到本服务器上,不适合大量图片上传. 第一.图片上传,代码如下: xxx.aspx 复制代码代码如下: <td cl ...
- Thinkphp框架图片上传实例
https://www.cnblogs.com/wupeiky/p/5802191.html [原文转载自:https://www.cnblogs.com/guoyachao/p/628286 ...
- struts2多图片上传实例【转】
原文地址:http://blog.csdn.net/java_cxrs/article/details/6004144 描述: 通过struts2实现多图片上传. 我使用的版本是2.2.1,使用的包有 ...
- uploadify多图片上传实例
upload.php <html> <head> <meta http-equiv="Content-Type" content="text ...
随机推荐
- 微信小程序，全局变量方法的使用
方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1.app.js文件,定义全局变量 /定义全局变量 globalData:{ userInfo:null, sysInfo:null, wi ...
- java转pdf（html转为pdf）,解决中文乱码，标签不规范等问题
第一步,下载jar包以及建对应的文件夹.注意pd4ml的jar要选择pro版本.然后建一个pd4fonts.properties 里面对应的字体. SimSun = simsun.ttf 前面为变量名 ...
- redis cluster 部署过程
一, 特点 高性能: 1.在多分片节点中,将16384个槽位,均匀分布到多个分片节点中 2.存数据时,将key做crc16(key),然后和16384进行取模,得出槽位值(0-16383之间) 3.根 ...
- MVC引入SERVICE层 提高代码重用性 沟通CONTROL和MODEL
MVC是web开发中常见的程序结构. 简单的mvc结构如下: view层:显示层. control层:业务层,集合了各种action. model层:模型层,一般和数据打交道.简单的sample:一个 ...
- (转)用mysql自带工具mysqlslap对数据库进行压力测试
http://aolens.blog.51cto.com/7021142/1901557-------用mysql自带工具mysqlslap对数据库进行压力测试 mysqlslap是mysql自带的工 ...
- git提交过程中遇到的 index.lock 问题导致无法提交的解决方法
在提交代码的过程中,可能会遇到下面的问题: fatal: Unable to create 'C:/programLists/zzw-q1/.git/index.lock': File exists. ...
- 关于null的操作
空值 空值一般用NULL表示 一般表示未知的.不确定的值,也不是空格 一般运算符与其进行运算时,都会为空 空不与任何值相等 表示某个列为空用:IS NULL 不能使用COMM＝NULL这种形式 某个 ...
- PHP正则表达式（转载）
这个星期要攻破PHP正则表达式 正则表达式定义 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取 ...
- mongodb数据导入导出mongoexport/mongoimport
数据导出 mongoexport 假设库里有一张user表,里面有2条记录,我们要将它导出 > use my_mongodb switched to db my_mongodb > db. ...
- ImportError: cannot import name wordnet
ubuntu安装好nltk,调用时,出现问题: 解决: Install Setuptools: http://pypi.python.org/pypi/setuptools Install Pip: ...