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中大括号作用介绍
Mar 22 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
Apr 25 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
Jun 25 PHP
Yii学习总结之安装配置
Feb 22 PHP
PHP图像处理类库MagickWand用法实例分析
May 21 PHP
教你在PHPStorm中配置Xdebug
Jul 27 PHP
用php代码限制国内IP访问我们网站
Sep 26 PHP
PHP中in_array函数使用的问题与解决办法
Sep 11 PHP
php变量与数组相互转换的方法(extract与compact)
Dec 02 PHP
浅谈PHP的反射机制
Dec 15 PHP
Ajax+PHP实现的模拟进度条功能示例
Feb 11 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
Apr 10 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
PHP4中实现动态代理
2006/10/09 PHP
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jquery easyui使用心得
2014/07/07 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python实现简单http服务器功能
2018/09/17 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python colormap库的安装和使用详情
2020/10/06 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
执行力心得体会
2013/12/31 职场文书
狼和鹿教学反思
2014/02/05 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
委托公证书格式
2015/01/26 职场文书
电影建党伟业观后感
2015/06/01 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
Python实现归一化算法详情
2022/03/18 Python