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 相关文章推荐
PHPShop存在多个安全漏洞
Oct 09 PHP
FCKeditor添加自定义按钮
Mar 27 PHP
php程序效率优化的一些策略小结
Jul 17 PHP
用PHP实现 上一篇、下一篇的代码
Sep 29 PHP
PHP基础教程(php入门基础教程)一些code代码
Jan 06 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
Feb 16 PHP
discuz加密解密函数使用方法和中文注释
Jan 21 PHP
php操作csv文件代码实例汇总
Sep 22 PHP
php使用CURL伪造IP和来源实例详解
Jan 15 PHP
php从给定url获取文件扩展名的方法
Mar 14 PHP
php使用变量动态创建类的对象用法示例
Feb 06 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
Oct 16 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
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python中防止sql注入的方法详解
2017/02/25 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python实现二维数组输出为图片
2018/04/03 Python
python 识别图片中的文字信息方法
2018/05/10 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL