• 使用uploadify多文件上传,单个删除上传成功的图片


    总体思路:在用uploadify上传成功一张图片,用js生成相应的元素,放到指定的位置,并且加上删除的标志。在保存的时候,把是img的所有的值,放到对应到字段里。

    jsp:

    <tr>
    <td style="110px;text-align: right;padding-top: 13px;">实景照片<span style="color: red;">(最多上传5张)</span>:</td>
    <td id="realPicTd">
    <input type="hidden" name="REAL_PICTURE" id="REAL_PICTURE" value="${pd.REAL_PICTURE}" maxlength="255" style="58%;"/>  后台对应的多图片的一个字段
    </td>
    </tr>

    在最后保存的时候的操作:把你上传的文件,用js拼接好元素放到指定的位置。

    var chk_value ="";
    var i = 0;
    $("#Form").find('input[name="img"]').each(function(){
    if(i == 0){
    chk_value = chk_value +$(this).val();
    }else{
    chk_value = chk_value + "," + $(this).val();
    }
    i++;
    });
    $("#REAL_PICTURE").val(chk_value);

    js:

    $("#uploadify2").uploadify({
    'buttonImg' : locat+"/plugins/uploadify/uploadp.png",
    'uploader' : locat+"/plugins/uploadify/uploadify.swf",
    'script' : locat+"/plugins/uploadify/uploadFile.jsp",
    'cancelImg' : locat+"/plugins/uploadify/cancel.png",
    'folder' : locat+"/uploadFiles/twoDimensionCode",//上传文件存放的路径,请保持与uploadFile.jsp中PATH的值相同
    'queueId' : "fileQueue",
    'queueSizeLimit' : 5,//限制上传文件的数量
    //'fileExt' : "*.rar,*.zip",
    //'fileDesc' : "RAR *.rar",//限制文件类型
    'fileExt' : '*.jpg;*.gif;*.png',
    'fileDesc' : 'Please choose(.JPG, .GIF, .PNG)',
    'auto' : false,
    'multi' : true,//是否允许多文件上传
    'simUploadLimit': 1,//同时运行上传的进程数量
    'buttonText': "files",
    'scriptData': {'uploadPath':'/uploadFiles/twoDimensionCode/'},//这个参数用于传递用户自己的参数,此时'method' 必须设置为GET, 后台可以用request.getParameter('name')获取名字的值
    'method' : "GET",
    'onComplete':function(event,queueId,fileObj,response,data){
    str = response.trim();//单个上传完毕执行
    var pathTemp = $("#path").val();
    var pathTemp1 = pathTemp.substring(0,pathTemp.lastIndexOf("/"));
    var path = pathTemp1 +'/'+ str;//图片路径

    var num = parseInt(document.getElementById("num").value);
    if(num>=5){
    //不做操作
    }else{
    var numtemp = num + 1;
    var inputname = "img" + numtemp;
    var realPicTd = document.getElementById("realPicTd");
    var div = document.createElement("div");
    div.setAttribute("id", inputname);
    div.style.width = "100px";
    div.style.height = "96px";
    div.style.textAlign = "center";
    div.style.float = "left";
    div.style.marginLeft = "10px";

    var img = document.createElement("img");
    img.style.width = "100px";
    img.style.height = "70px";
    img.src = path;
    var input = document.createElement("input");
    input.setAttribute("name", "img");
    input.setAttribute("type", "hidden");
    input.setAttribute("value", str );
    var a = document.createElement("a");
    a.innerHTML = "删除";
    a.style.color = "red";
    var deleteName = "deleteImg('"+inputname+"')";
    a.setAttribute("onclick",deleteName);
    a.style.cursor = "pointer";

    div.appendChild(img);
    div.appendChild(input);
    div.appendChild(a);

    realPicTd.appendChild(div);
    $("#num").val(numtemp);
    }

    },
    'onAllComplete' : function(event,data) {
    //alert(str); //全部上传完毕执行
    },
    'onSelect' : function(event, queueId, fileObj){
    $("#hasTp1").val("ok");
    }
    });

    效果:

  • 相关阅读:
    HNOI2017影魔
    CQOI2015任务查询系统
    ZJOI2007报表统计
    python学习之 getattr vs __get__ vs __getattr __ vs __getattribute__ vs __getitem__
    jenkins+supervisor实现django项目的自动部署(ubuntu)
    gunicorn+anaconda+nginx部署django项目(ubuntu)
    uwsgi+anaconda+nginx部署django项目(ubuntu下)
    es过滤集提升权重
    一道Python面试题:给出d = [True, False, True, False, True],请利用列表d,只用一句话返回列表[0,2,4]
    从一道Python面试题说起(大神勿入)
  • 原文地址:https://www.cnblogs.com/liyang19910805/p/5695090.html
Copyright © 2020-2023  润新知