PHP+Ajax+JS实现多图上传


Posted in PHP onMay 07, 2016

本文实例在wap站项目中需要做一个ajax多图片上传,结合js插件做了一个,供大家参考,具体内容如下

/* ajax 上传图片 */
 var num = 0;
 // 点击删除图片
function onDelete(num){
  if($("#"+num).attr('src')!="__PUBLIC__/Home/images/jiazai.gif" && $("#"+num).attr('src')!=""){
      if(confirm("确认删除吗")){
        $("#a"+num).remove();
      }else{
        // 
      }
  }
}
$(function(){ 
 
    $("#file0").bind("change",function(){
     
          clickUpload(num);
           
    }); 
    function clickUpload(num){
       var imgObject = document.getElementById('file0'); // 文件对象
 
      $("#yulan").append("<a id='a"+num+"' onclick='onDelete("+num+")' href='javascript:;'> <img id='"+num+"' width='75' height='75'  src='__PUBLIC__/Home/images/jiazai.gif'/></a>");
        
       // $("#yulan").append("<li id='a"+num+"' ><img id='"+num+"' src='__PUBLIC__/Home/images/jiazai.gif' /><a href='javascript:;' onclick='onDelete("+num+")'>删除</a></li>");
       var getImageSrc = getFullPath(imgObject); // 本地路径
       // 实例化image对象
 
       var pos = getImageSrc.lastIndexOf(".");
       var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀
 
       if(lastname!=".jpg" && lastname!=".png" && lastname!=".jpeg" && lastname!='.gif'){
         $("#a"+num).remove();
          alert("请选择一张图片");
       }else{
         ajaxFileUpload(num);
         $("#file0").unbind("change").bind("change",function(){
           clickUpload(num);
          });
       } 
       num++;
    }
 
 
    function getFullPath(obj) {  //得到图片的完整路径
      if (obj) {
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
          obj.select();
          return document.selection.createRange().text;
        }else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
          if (obj.files) {
            return obj.files.item(0).getAsDataURL();
          }
          return obj.value;
        }
          return obj.value;
      }
    } 
    function ajaxFileUpload(num) {
 
      $.ajaxFileUpload
      (
        {
          url: 'http://xxxx/updateImg', //用于文件上传的服务器端请求地址
          secureuri: false, //是否需要安全协议,一般设置为false
          fileElementId: 'file0', //文件上传域的ID
          dataType: 'json', //返回值类型 一般设置为json
          success: function (data) //服务器成功响应处理函数
          {
            var jsonText = data; 
            console.log(jsonText);
            if(jsonText['status']==1){ 
              if(jsonText['info']!=""){ 
                console.log(jsonText['info']);
                $("#"+num).attr("src","__PUBLIC__//Admin/Upload/"+jsonText['info']);
   
                 var images = $("#img").val();
   
                if(images!=""){
                  $("#img").val(images+","+jsonText['info']);
                }else{
                  $("#img").val(images+""+jsonText['info']);
                }
                 
              }
            }else{
              $("#a"+num).remove();
              // alert("图片上传失败");  
            }            
          },
          error: function (data,e)//服务器响应失败处理函数
          {
            alert(e);
          }
        }
      )
    }
});

以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。

PHP 相关文章推荐
在PHP的图形函数中显示汉字
Oct 09 PHP
PHP 中执行系统外部命令
Oct 09 PHP
php xml实例 留言本
Mar 20 PHP
PHP 反向排序和随机排序代码
Jun 30 PHP
PHP+swoole实现简单多人在线聊天群发
Jan 19 PHP
Zend Studio使用技巧两则
Apr 01 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
Apr 12 PHP
PHP常见的6个错误提示及解决方法
Jul 07 PHP
PHP类的特性实例分析
Sep 28 PHP
PHP中递归的实现实例详解
Nov 14 PHP
PHP面向对象程序设计继承用法简单示例
Dec 28 PHP
thinkphp 获取控制器及控制器方法
Apr 16 PHP
php实现图片上传、剪切功能
May 07 #PHP
简单概括PHP的字符串中单引号与双引号的区别
May 07 #PHP
PHP检测链接是否存在的代码实例分享
May 06 #PHP
一波PHP中cURL库的常见用法代码示例
May 06 #PHP
PHP实现的简单分页类及用法示例
May 06 #PHP
PHP实现的多文件上传类及用法示例
May 06 #PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
May 06 #PHP
You might like
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
建筑工地标语
2014/06/18 职场文书
四风查摆剖析材料
2014/10/10 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS