inputfile多文件上传,删除当前文件的问题

html内容

 <div class="form-group" id="fangInput">
</div>                                                                 
<div class="form-group">                                 
<input type="file" name="files" id="fileIds1" values="请选择上传文件" multiple="multiple" >
<button type="button" class="btn btn-default" style="background-color:#337ab7;color:#fff;margin-top:3px" id="btn_upload1" >点击上传</button>                                   </div>

js内容

  $("#btn_upload1").click(function () {
          var fileObj1 = document.getElementById("fileIds1").files
          console.log(fileObj1);
          if(JSON.stringify(fileObj1)==='{}'){
               alert("请选择上传文件")
            }else{
            var i = 0;
            var jj = 0;
            var formFile = new FormData();             
            for (i; i < fileObj1.length; i++) {                
               var fileObj = document.getElementById("fileIds1").files[i];                              
                   formFile.append("files", fileObj);
            }//加入文件对象
                   var data = formFile;
                   $.ajax({
                       url: '${ctxPath}/data/readFile?id='+fileupload,
                       data: data,
                       type: "Post",
                       dataType: "json",
                       cache: false,//上传文件无需缓存
                       processData: false,//用于对data参数进行序列化处理 这里必须false
                       contentType: false, //必须
                       success: function (data) {   
                                  if("ok" ==   data.msg){
                                  alert("上传文件成功!");
                               fileIds=fileIds+data.id;
                               console.log(fileIds);                                  
                                  }else{
                                    alert("上传文件失败!");
                                     $("#fileIds").val("");
                                    fileIds="";
                                  }
                       }
                   })                  
            }                        

           })
     $("#fileIds1").change(function() {
        console.log(1);
        var fileObj1 = document.getElementById("fileIds1").files; // js 获取文件对象
        console.log(fileObj1);
        for (var i = 0; i < fileObj1.length; i++) {
        $("#fangInput").append('<p for="message-text" class="control-label" style="width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden">文件名:' +
            fileObj1[i].name +
            ' <button type="button" onclick="fangDelete(this)" class="btn btn-default del-btn" style="background-color:#dc4739;color:#fff;margin-top:3px">删除文件</button></p >');
           }
         console.log(fileObj1);
     })

     function fangDelete(t) {
       var fileObj1 = document.getElementById("fileIds1").files;
       console.log(fileObj1);
       delete fileObj1[t];
       console.log(fileObj1);
       console.log($(t).closest("p"));
        $(t).closest("p").remove();      

      }

input file在前端进行了多选,删除操作,但实际上我只是删除了表面视图上的p元素,实际input(file)里的值我并没有改变,上传到后端的还是那些文件。想请问大神如何在我的点击事件里再删除p元素的同时,用删除当前选中input file的值,实现真正意义上的文件的多选,删除

2个回答

multiple的file删除不了里面指定的文件,你只能用hidden记录住删除的文件的下标,一起回发服务器,这些指定下标的文件不保存就行了。

或者参考这个,删除就同时删除同时选择的一批文件,而不是多个中的一个
http://www.w3dev.cn/article/20160608/jquery-multiple-file-select-upload-plugin.aspx

showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复: 已经说了 ,multiple多选,无法删除文件集合里面的其中一项,只能整体删除(就是移除dom后重新生成dom),或者记录住删除的下标,提交后服务器端不保存这些下标的文件。
接近 2 年之前 回复
fangBlood
fangBlood 但 我想做的 就是删除当前啊
接近 2 年之前 回复

easy ui官网上都有这些插件辅助啊,可以参考官网上的去写自己的。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问