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安装全攻略:APACHE
Oct 09 PHP
如何正确理解PHP的错误信息
Oct 09 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
Jun 22 PHP
php实现字符串反转输出的方法
Mar 14 PHP
列举PHP的Yii 2框架的开发优势
Jul 03 PHP
PHP浮点数的一个常见问题
Mar 10 PHP
Laravel5中防止XSS跨站攻击的方法
Oct 10 PHP
PHP执行shell脚本运行程序不产生core文件的方法
Dec 28 PHP
PHP绕过open_basedir限制操作文件的方法
Jun 10 PHP
PHP中quotemeta()函数的用法讲解
Apr 04 PHP
thinkphp5实现微信扫码支付
Dec 23 PHP
PHP程序守护进程化实现方法详解
Jul 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漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
初学python数组的处理代码
2011/01/04 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Apache如何部署django项目
2017/05/21 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
简单实现python画圆功能
2018/01/25 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
自荐信的禁忌和要点
2013/10/15 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
小学美术教学反思
2014/02/01 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
高中英语教学反思范文
2016/03/02 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python