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实现多服务器session共享之NFS共享的方法
Mar 16 PHP
php date与gmdate的获取日期的区别
Feb 08 PHP
php数组函数序列之array_flip() 将数组键名与值对调
Nov 07 PHP
使用PHP编写的SVN类
Jul 18 PHP
php中stdClass的用法分析
Feb 27 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
Jun 13 PHP
php利用fsockopen GET/POST提交表单及上传文件
May 22 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
May 24 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
Sep 26 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
Dec 20 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
May 15 PHP
PHP实现简易用户登录系统
Jul 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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js实现图片360度旋转
2017/01/22 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
python Selenium 库的使用技巧
2020/10/16 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
篮球兴趣小组活动总结
2014/07/07 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
升学宴演讲稿
2014/09/01 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
敬老院活动感想
2015/08/07 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技