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 相关文章推荐
文章推荐系统(二)
Oct 09 PHP
一个自定义位数的php多用户计数器代码
Mar 11 PHP
快速配置PHPMyAdmin方法
Jun 05 PHP
PHP zlib扩展实现页面GZIP压缩输出
Jun 17 PHP
非常好用的两个PHP函数 serialize()和unserialize()
Feb 04 PHP
基于PHP创建Cookie数组的详解
Jul 03 PHP
php实现的发送带附件邮件类实例
Sep 22 PHP
搭建基于Docker的PHP开发环境的详细教程
Jul 01 PHP
PHP弹出对话框技巧详细解读
Sep 26 PHP
PHP获取当前日期及本周一是几月几号的方法
Mar 28 PHP
Laravel 微信小程序后端搭建步骤详解
Nov 26 PHP
php中数组最简单的使用方法
Dec 27 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网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Python实现简单登录验证
2016/04/13 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python多项式回归的实现方法
2019/03/11 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
房产公证书范本
2014/04/10 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2016年寒假家长评语
2015/10/10 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers