fangBlood 2018-10-07 17:52 采纳率: 77.8%
浏览 6334
已采纳

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条回答 默认 最新

  • 斯洛文尼亚旅游 2018-10-07 18:23
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
  • ¥15 潜在扩散模型的Unet特征提取
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部