前台文件代码

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 />

价&nbsp;&nbsp;格：<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产品细节图多图上传示例代码 无刷新的更多相关文章

  1. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  2. HTML5实现多文件的上传示例代码

    [转自] http://www.jb51.net/html5/136791.html 主要用到的是<input>的multiple属性 代码如下: <input type=" ...

  3. mui开发app之多图压缩与上传（仿qq空间说说发表）

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

  4. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  5. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  6. JAE京东云引擎Git上传管理代码教程和京东云数据库导入导出管理

    文章目录 Git管理准备工作 Git工具上传代码 发布代码装程序 mywebsql管理 京东云引擎小结   JAE京东云引擎是京东推出的支持Java.Ruby.Python.PHP.Node.js多语 ...

  7. WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现

    WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现 一.漏洞描述 Weblogic管理端未授权的两个页面存在任意上传getshell漏洞,可直接获取权限.Oracle 7月 ...

  8. 【转载】兼容php5，php7的cURL文件上传示例

    转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...

  9. git上传项目代码到github

    参考: git学习——上传项目代码到github github上传时出现error: src refspec master does not match any解决办法 git 上传本地文件到gith ...

随机推荐

  1. WPF 使用Task代替ThreadPool和Thread

    一:Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的不方便.比如: 1: ThreadPool不支持线程的取消.完成.失败通知等交互 ...

  2. 大众点评cat监控平台搭建

    参考官方文档:https://github.com/dianping/cat/wiki/readme_server 1.数据库相关 (1)创建数据库cat,并执行以下sql创建相关表: CREATE ...

  3. Centos Linux release 7.2.15ll (core) yum 安装java环境

    系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) #安装之前先查看一下有无系统 ...

  4. linux系统下 android studio的 Terminal 中 执行 gradlew命令找不到

    错误显示: 原因是linux系统中优先查找的是PATH环境中的程序,并不是当前目录下,执行当前目录下的程序要加上./. 这个错误很明白了,没有gradlew的执行权限.可以ls -al查看下gradl ...

  5. java：Oracle（级联删除，左右内外交叉自然连接，子查询，all，any，in）

    1.级联删除: -- 级联删除:裁员,公司倒闭 -- 级联删除(cascade),设置为null(setnull),放任不管(No action) -- cascade:(以一对多为例)如果删除多的一 ...

  6. node在Web中的用途

    1.网站后台: user browser ——> application server(node开发的application,处理用户的所有请求和给用户的响应) 2.分发数据请求,渲染HTML: ...

  7. unity中的常遇到的问题

    1.使用unity的MovieTexture播放视频在物体上,对象只能在电脑上 2.移动端播放全屏视频 Handheld.PlayFullScreenMovie(),视频文件必须放置在Streamin ...

  8. #Java学习之路——基础阶段二（第十一篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  9. IDEA github 上传项目， 拉取， 删除

    1.IDEA登录github账号 settings -> Version Controller -> GitHub 用户名密码登录 或token登录都可以 2.VCS -> impo ...

  10. 浅谈spring配置定时任务的几种方式

    网上看到好多关于定时任务的讲解,以前只简单使用过注解方式,今天项目中看到基于配置的方式实现定时任务,自己做个总结,作为备忘录吧. 基于注解方式的定时任务 首先spring-mvc.xml的配置文件中添 ...