fangBlood
2018-10-08 01:52
采纳率: 77.8%
浏览 5.9k

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

    点赞 打赏 评论
  • Buji_qiang 2018-10-08 08:39

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

    点赞 打赏 评论

相关推荐 更多相似问题