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 相关文章推荐
php5.3 废弃函数小结
May 16 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
Sep 20 PHP
PHP设计模式 注册表模式
Feb 05 PHP
php实现批量下载百度云盘文件例子分享
Apr 10 PHP
php+js iframe实现上传头像界面无跳转
Apr 29 PHP
PHP常用的缓存技术汇总
May 05 PHP
php中file_get_contents与curl性能比较分析
Nov 08 PHP
php操作xml入门之cdata区段
Jan 23 PHP
PHP实现GIF图片验证码
Nov 04 PHP
workerman结合laravel开发在线聊天应用的示例代码
Oct 30 PHP
PHP的mysqli_sqlstate()函数讲解
Jan 23 PHP
laravel5表单唯一验证的实例代码
Sep 30 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执行速度全攻略(下)
2006/10/09 PHP
通过html表格发电子邮件
2006/10/09 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
python的Tqdm模块的使用
2018/01/10 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
应届生.NET方向面试题
2015/05/23 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
佛光寺导游词
2015/02/10 职场文书
世界名著读书笔记
2015/06/25 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Python torch.flatten()函数案例详解
2021/08/30 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL