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 获取一个月第一天与最后一天的代码
May 16 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
May 29 PHP
解析PHP可变函数的经典用法
Jun 20 PHP
Yii使用find findAll查找出指定字段的实现方法
Sep 05 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
Nov 19 PHP
PHP遍历数组的三种方法及效率对比分析
Feb 12 PHP
PHP 常用的header头部定义汇总
Jun 19 PHP
PHP实现HTML页面静态化的方法
Nov 04 PHP
php根据数据id自动生成编号的实现方法
Oct 16 PHP
php mysql_list_dbs()函数用法示例
Mar 29 PHP
PHP实现的链式队列结构示例
Sep 15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
Mar 26 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 XML备份Mysql数据库
2009/05/27 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
教师求职推荐信范文
2013/11/20 职场文书
七年级英语教学反思
2014/01/15 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
详解jQuery的核心函数和事件处理
2022/02/18 jQuery