大神们好:
需求描述:页面选择多张图片后,支持单个删除,使用form提交文件能和表单一起提交到后台
问题描述:js初始化不设置uploadUrl属性,图片右下角不会出现删除图标(所以写了个虚假url,目的是显示删除图标)
                  1.如果不点击图片的单个删除,直接form提交到后台文件数正常。
                  2.如果点击了单个图片删除,页面效果正常,不过提交到后台的文件都被清空了。
                  3.如果先选3张,删除1张,再选1张,页面上面显示3张(正常),但是提交到后台只有删除之后再次选择的那1张
                  4.如果使用异步提交图片,不会出现上述问题,但是因项目原因,需使用form提交
求解方案:fileinput form同步提交能否在单个删除后提交到后台文件数量正常这是初始化页面html多文件上传
<div class="form-group">
 <label class="col-sm-3 control-label">类目图片:</label>
   <div class="col-sm-8">
   <input id="catTypeUrls" name="catTypeUrls" type="file" class="file-loading" accept="image/*" multiple>
  </div>
 </div>   
这是js初始化组件(uploadUrl随便写的,因为加了这个标签图片上面的单个删除才会显示)
$("#catTypeUrls").fileinput({
uploadUrl: "upload",
uploadAsync: false, //同步上传  
showUpload : false,
showRemove : false,
autoReplace: false,
    maxFileCount: 10,
language : 'zh',
showCaption: false,
enctype: 'multipart/form-data',
    allowedFileExtensions: ["jpg", "png", "gif"],
    minImageWidth: 50,
    minImageHeight: 50,
    maxFileSize : 2000,
    overwriteInitial: false,//不覆盖已存在的图片  
    layoutTemplates:{
     actionUpload:''    //设置为空可去掉上传按钮
     //actionDelete:''  //设置为空可去掉删除按钮
    }
});
这是页面显示效果

解决方案 »

  1.   

    调试源码发现,使用异步提交时候调用了源码的upload函数,而使用form提交没有调用该函数,该函数做了一系列的处理
    或者有大神知道form提交的时候取fileinput的数据是取自哪里(函数)吗?
      

  2.   

    这个插件直接form提交时提交原始的file那个dom对象,只能得到最后一次选择的文件,因为都是同一个file,选择多次值保存最后一次选择的。而ajax提交的是FormData,每次file 那个dom change都会添加内容到FormData中,删除也会从FormData中删除操作的的不是同一个file对象,一定要表单提交可以参考这个,也是批量上传的:多文件选择上传jquery插件,居于表单提交的