文件上传时新增、删除，序号的变化

最新推荐文章于 2024-02-03 16:52:32 发布

cacalili

最新推荐文章于 2024-02-03 16:52:32 发布

阅读量954

点赞数

文章标签： table

本文链接：https://blog.csdn.net/cacalili/article/details/80899674

版权

//文件上传按钮

<tr>
 <td align="right" class="OrderTd">附件上传 : </td>
 <td colspan="2">
 <a href="javascript:void(0);" class="a-upload">
<input type="file" name="file" id="pic"style="width: 50%; font-size: 13px; " accept="image/gif,image/BMP,image/png,image/jpg,image/jpeg,text/plain,application/vnd.ms-excel,application/vnd.ms-powerpoint,application/pdf,application/msword">
 点击获取文件
 </a>
 </td>
 </tr>

//写一个定时器，监听id="pic"的变化，一有文件，马上上传

setTimeout(function(){

$("#fileList").append("附件列表:");
 $("#showFileList").append("<tr id='fileListTr' style='display:none'><td align='center'>序号</td><td align='center'>附件名称</td><td align='center'>操作</td></tr>");

 var inputs = document.getElementById("pic");
 if(inputs){
 inputs.addEventListener("change", function(evt) {

 for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {

 var file = this.files[i];
 fileUpload();
 function fileUpload() {
 var index = $("#showFileList tr").size()-1;//上传前先得到当前table有多少行
 var fup = document.getElementById("pic");
 var fileSize = fup.files[0].size;//得到图片大小
 var fileName = fup.files[0].name;//得到图片名称
 var formData = new FormData($("#workOrderAddForm")[0]);
 var ticketNo = $("#e_ticketNo").val();
 formData.append("fileSize",fileSize);
 formData.append("fileName",fileName);
 formData.append("ticketNo",ticketNo);
 formData.append("type","3");
 var html="";
 var info="";
 $.ajax({
 url : '${ctx}' + '/job/fileAdd',
 type: 'POST',
 data:formData,
 contentType: false,
 processData: false,
 dataType: "json",
 error : function() {
 },
 success : function(jsonObj) {
 if(jsonObj != null){
 if(jsonObj.message == "SUCCESS"){
 html+="<tr id='"+jsonObj.unqiueId+"'><td>"+(++index)+"</td><td>"//序号增加1
 +jsonObj.fileName+"</td>"
 +"<td align='center'>"
 +" <a οnclick=preview('"+jsonObj.img+"')"
 +" href='javascript:void(0)' style='margin-right: 10px;font-size: 14px;'>预览</a>"
 +"<a οnclick=fileDelete('"+jsonObj.unqiueId+"')"
 +" href='javascript:void(0)' style='font-size: 14px;'>删除</a>"
 +"</td></tr>";
 $("#showFileList").append(html);
 $("#fileList").append(info);
 if($("#showFileList tr").size()>1){
 $("#fileListSpan").css({"display":"block"});
 $("#fileListTr").css({"display":"contents"});
 }
 }else if(jsonObj.message == "fileTooMax"){
 $.messager.alert('提示', '附件太大，请上传10M以内的附件!', 'info');
 }
 }

 }
 });
 };
 }
 },false);
 }
},2000)

//这个是删除附件列表中的图片的

   function fileDelete(unqiueId){
       var path = '${ctx}' + '/workorderInput/fileDelete';
       var jsonParam = jQuery.param({ "unqiueId": unqiueId });
       $.ajax({
           url : path,
            type: "POST",
            async: false,
            data: jsonParam,
            dataType: "json",
            cache: false,
            success: function (result) {

               result = $.parseJSON(result);
               if(result.result == "SUCCESS"){
                   parent.$.messager.alert('提示', "附件删除成功", 'info');

var trNode = $("#"+unqiueId);

//删除时先把当前行下面行的序号遍历，减1

                    $("#"+unqiueId).nextAll("tr").each(function (index,element) {
                        var a = $("#"+unqiueId).find("td").eq(0).text();
                        $(this).find("td").eq(0).text(parseInt(a)+index);

                    });
                    trNode.remove();
               }else{
                   parent.$.messager.alert('提示', "附件删除失败", 'info');
               }
               //$("#"+unqiueId).remove();
               //$("#preview").get(0).innerHTML = "";
            }
        });

}

效果图如下：实现序号变化（当然也可以使用其他前台架构的table，如easyUi的datagrid）