PHP+Ajax+JS实现多图上传
来源: 阅读:1383 次 日期:2016-08-24 14:52:15
温馨提示: 小编为您整理了“PHP+Ajax+JS实现多图上传”,方便广大网友查阅!

本文实例在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(" ");

// $("#yulan").append("

  • 删除
  • ");

    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+Ajax+JS实现多图上传
    由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

    2026国考·省考课程试听报名

    • 报班类型
    • 姓名
    • 手机号
    • 验证码
    关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 新媒体/短视频平台| 手机站点| 投诉建议
    工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
    云南网警备案专用图标
    联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:
    咨询QQ:1093837350(9:00—18:00) 版权所有:
    云南网警报警专用图标
    Baidu
    map