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.ini中文版(1)
Oct 09 PHP
PHP4 与 MySQL 交互使用
Oct 09 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
Dec 30 PHP
PHP swfupload图片上传的实例代码
Sep 30 PHP
php实现的双向队列类实例
Sep 24 PHP
php实现将任意进制数转换成10进制的方法
Apr 17 PHP
PHP浮点数的一个常见问题
Mar 10 PHP
PHP 返回13位时间戳的实现代码
May 13 PHP
PHP性能优化大全(php.ini)
May 20 PHP
thinkPHP模板算术运算相关函数用法分析
Jul 12 PHP
Laravel框架模型的创建及模型对数据操作示例
May 07 PHP
PHP 文件写入和读取操作实例详解【必看篇】
Nov 04 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php分页示例代码
2007/03/19 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
js实现无缝滚动双图切换效果
2019/07/09 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
小学生环保演讲稿
2014/04/25 职场文书
学生鉴定评语大全
2014/05/05 职场文书
新学期开学演讲稿
2014/05/24 职场文书
中考标语大全
2014/06/05 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
高中生学习计划书
2014/09/15 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js