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模板类代码
Sep 07 PHP
php处理json时中文问题的解决方法
Apr 12 PHP
php从数组中随机抽取一些元素的代码
Nov 05 PHP
ThinkPHP CURD方法之table方法详解
Jun 18 PHP
ThinkPHP实现一键清除缓存方法
Jun 26 PHP
初识Laravel
Oct 30 PHP
PHP版微信公众平台红包API
Apr 02 PHP
PHP环境搭建的详细步骤
Jun 30 PHP
WordPress过滤垃圾评论的几种主要方法小结
Jul 11 PHP
使用Yii2实现主从数据库设置
Nov 20 PHP
解决Laravel自定义类引入和命名空间的问题
Oct 15 PHP
Laravel validate error处理,ajax,json示例
Oct 25 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
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
django model去掉unique_together报错的解决方案
2016/10/18 Python
python实现泊松图像融合
2018/07/26 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
演讲稿开场白
2014/01/13 职场文书
医疗纠纷协议书
2014/04/16 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
大学感恩节活动总结
2015/05/05 职场文书
招商银行收入证明
2015/06/17 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android