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 相关文章推荐
从一个不错的留言本弄的mysql数据库操作类
Sep 02 PHP
纯真IP数据库的应用 IP地址转化成十进制
Jun 14 PHP
php 模拟POST提交的2种方法详解
Jun 17 PHP
PHP的Yii框架的基本使用示例
Aug 21 PHP
4种PHP异步执行的常用方式
Dec 24 PHP
php打包压缩文件之ZipArchive方法用法分析
Apr 30 PHP
Zend Framework前端控制器用法示例
Dec 11 PHP
php实现文件上传及头像预览功能
Jan 15 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
Mar 13 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
Sep 21 PHP
laravel框架关于搜索功能的实现
Mar 15 PHP
php实现微信模板消息推送
Mar 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
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
vue.js的提示组件
2017/03/02 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python中下划线的使用方法
2015/03/27 Python
Python中的下划线详解
2015/06/24 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python中count函数简单用法
2020/01/05 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
2014年安全生产责任书
2014/07/22 职场文书
中队活动总结
2014/08/27 职场文书
小学师德师风整改措施
2014/10/27 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
用Python实现屏幕截图详解
2022/01/22 Python
golang语言指针操作
2022/04/14 Golang