php产品细节图多图上传示例代码 无刷新
前台文件代码
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=gb2312" />
<title>产品细节图多图上传示例代码 无刷新</title>
<style>
.filepath{width:300px;}
.uploadinfo{color:#009900;}
</style>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function process(v){
if(v=="inform"){
document.addimgform.action="do_upload.php";
$("form").attr("target","fileUp");
}
document.addimgform.submit();
} $(document).ready(function(){ ////////////////////
$('#add_gallery').click(function(){
$("#gallery").append('<div class="addinput"><a href="javascript:;" class="remove_gallery">[-]</a> <input name="filepath[]" id="textpath" class="textpath" type="text" value="" /> <input type="file" name="img_gallery[]" id="img_gallery" class="filepath" /> <span class="spanimg"></span></div>');
}); ////////////////////
$(document).on("click",".remove_gallery",function(){$(this).parent(".addinput").remove();}); ////////////////////
$(document).on("change",".filepath",function(){
var route=$(this).val();
$(this).parents(".addinput").find(".textpath").val(route);
}); ////////////////////
$(document).on("click",".delimg",function(){
id = $(this).attr("rel");
url = $(this).attr("rev");
path = $(this).attr("rep");
name = $(this).parents(".addinput").find(".filepath").val();
$.post
(
"do_upload.php",
{imgid:id,imgurl:url,imgpath:path},
function(){
alert('图片 '+name+' 已删除!');
},
"html"
);
$(this).parents(".addinput").remove();
}); //////////////////// }); </script> </head> <body> <!--<form id="addimgform" name="addimgform" target="fileUp" enctype="multipart/form-data" action="do_upload.php" method="post">-->
<form id="addimgform" name="addimgform" enctype="multipart/form-data" action="product.php" method="post">
<fieldset>
<legend>产品上传</legend> 产品名:<input name="proname" type="text" value="" /><br /><br />
价 格:<input name="price" type="text" value="" /><br /><br /> <fieldset>
<legend>图片上传</legend> <div id="gallery">
<div class="addinput"><a href="javascript:;" class="remove_gallery">[-]</a> <input name="filepath[]" id="textpath" class="textpath" type="text" value="" /> <input type="file" name="img_gallery[]" id="img_gallery" class="filepath" /> <span class="spanimg"></span></div>
</div>
<a href="javascript:;" id="add_gallery">[+]</a>
<input name="upimg" type="submit" value="上传" id="upimg" onclick="process('inform')">
<span class="uploadinfo"></span>
</fieldset>
<iframe style="border:0px;" width="0px" height="0px" name="fileUp"></iframe> <script>
function notice_success(i,url,path,info){
$("#gallery .textpath").eq(i).val(url);
$("#gallery .spanimg").eq(i).html(info+'<img src="'+url+'" style="width:60px; height:60px;" align="absmiddle" /> <a class="delimg" href="javascript:;" rel="'+i+'" rev="'+url+'" rep="'+path+'">删除</a> ');
}
function notice_failure(info){
$("#gallery .spanimg").eq(i).html(info);
}
</script> <input name="submit" type="submit" value="提交" id="submit"> </fieldset> </form>
</body>
</html>
后台文件代码
do_upload.php
<?php $basedir = dirname(__FILE__).'/'.date('Y-m-d');
$new_folder = str_replace('\\','/',$basedir);
if(file_exists($new_folder)){
//echo 'exists';
}else{
mkdir($new_folder, 0777);
}
?> <?php if (isset($_POST['imgid']) && isset($_POST['imgurl']) && isset($_POST['imgpath'])){
if(file_exists($_POST['imgpath'])){
$thepath = str_replace('/','\\',$_POST['imgpath']);
unlink($thepath);
}else{
echo '未找到相关文件';
}
} if(!empty($_FILES)){
for ($i=0;$i<count($_FILES['img_gallery']['tmp_name']);$i++){
//$file_name = iconv('utf-8', 'gb2312', $_FILES['img_gallery']['name']);//在utf8编码下可以防止中文乱码
$upfile = $new_folder."/".$_FILES['img_gallery']['name'][$i];//此处路径换成你的
$imgpath = 'http://'.$_SERVER['SERVER_NAME'].'/images/'.date('Y-m-d').'/'.$_FILES['img_gallery']['name'][$i];//上传后的图片url
if(move_uploaded_file($_FILES['img_gallery']['tmp_name'][$i],$upfile)){
//echo "第".($i+1)."张图片上传成功<br>";
$info = "第".($i+1)."张图片上传成功! ";
//此处进行数据库操作
?>
<script>parent.notice_success('<?php echo $i;?>','<?php echo $imgpath;?>','<?php echo $upfile;?>','<?php echo $info;?>');</script>
<?php
@unlink($_FILES["img_gallery"]["tmp_name"][$i]);
}
else{
$info = "第".($i+1)."张图片上传不成功! ";
?>
<script>parent.notice_failure('<?php echo $info;?>');</script>
<?php
}
}
}
?>
打完收工!
php产品细节图多图上传示例代码 无刷新的更多相关文章
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- HTML5实现多文件的上传示例代码
[转自] http://www.jb51.net/html5/136791.html 主要用到的是<input>的multiple属性 代码如下: <input type=" ...
- mui开发app之多图压缩与上传(仿qq空间说说发表)
欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- UEditor之实现配置简单的图片上传示例
UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...
- JAE京东云引擎Git上传管理代码教程和京东云数据库导入导出管理
文章目录 Git管理准备工作 Git工具上传代码 发布代码装程序 mywebsql管理 京东云引擎小结 JAE京东云引擎是京东推出的支持Java.Ruby.Python.PHP.Node.js多语 ...
- WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现
WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现 一.漏洞描述 Weblogic管理端未授权的两个页面存在任意上传getshell漏洞,可直接获取权限.Oracle 7月 ...
- 【转载】兼容php5,php7的cURL文件上传示例
转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...
- git上传项目代码到github
参考: git学习——上传项目代码到github github上传时出现error: src refspec master does not match any解决办法 git 上传本地文件到gith ...
随机推荐
- 浏览器端-W3School-Browser:Window 对象
ylbtech-浏览器端-W3School-Browser:Window 对象 1.返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架 ...
- unity3d卡在loading的解决方法
解决方案: 关闭U3D,打开电脑的网络适配器把网给掐掉,打开U3D后会提示Workoffline 点击这个即可,然后再把网给起起来就可以了
- 阶段3 2.Spring_10.Spring中事务控制_11 spring5新特性的介绍
jdk1.7和1.8的差别 准备好的一个maven工程 反射创建对象10亿次 ,用的时间 替换jdk的版本 选择为1.7 切换了1.7的版本以后呢执行的速度就变的非常的慢 两个版本的对比 响应式编程风 ...
- UOJ#48最大矩形面积
题面 这是一道标准的单调栈的题目,但是由于题目的个例性,该题对于前后两数等于的情况并无额外处理,so也确实是让这题简单了一点 也没什么好说的直接上代码吧 #include<iostream> ...
- JWT的实现原理
前言最近在做一个python项目的改造,将python项目重构为java项目,过程中遇到了这个知识点,觉得这个蛮实用的,所以下班后回来趁热打铁写下这篇总结,希望后面的人能够有所借鉴,少走弯路. 一.优 ...
- Java应用监控利器JMX
啥是 JMX? The Java Management Extensions (JMX) API is a standard API for management and monitoring of ...
- 【VS开发】【图像处理】RGB各种格式
RGB格式 RGB组合格式 名字 RGB组合格式 描述 此格式用来匹配PC图形帧缓存.每个像素占据8,16,24或32个位,他们都是组合像素格式,其意为在内存中所有像素数据都是相邻排列的.当使用这些格 ...
- magento下载地址
https://download.magentochina.org/magento/2/ https://www.magentochina.org/blog/download-install-mage ...
- Akka系列(八):Akka persistence设计理念之CQRS
前言........ 这一篇文章主要是讲解Akka persistence的核心设计理念,也是CQRS(Command Query Responsibility Segregation)架构设计的典型 ...
- 四、Kubernetes_V1.10集群部署-master-创建kubeconfig
1.生成配置文件 # 创建 TLS Bootstrapping Token # export BOOTSTRAP_TOKEN=$( /dev/urandom | od -An -t x | tr -d ...