FormData中delete方法在ios不兼容

1.移动端直接用的input的file上传图片(name=“file”必填)

<input type="file"  id="exampleInputFile1"  accept="image/*" class="col-xs-3" name="file" >
 <label for="exampleInputFile1" class="col-xs-3 InputFile">
                             <img src="img/signup/add.png" alt=""   class=" add1"/>
                          </label>
 <div class="box1">
                     <label for="exampleInputFile1"  class="col-xs-3">封面美照*</label>
                      <span class="help-block col-xs-9">(仅可以上传1张png/jpg格式的图片)</span>
                  <div class="col-xs-12">
                      <input type="file"  id="exampleInputFile1"  accept="image/*" class="col-xs-3" name="file" >
                      <div class="action1 col-xs-9"><!--展示图片页面-->
                          <label for="exampleInputFile1" class="col-xs-3 InputFile">
                             <img src="img/signup/add.png" alt=""   class=" add1"/>
                          </label>
                     </div>
                  </div>

              </div>

2.js部分。因为input中的file值需要清空,FormData的值也需要清空。但是ios不支持清空,所以重置下FormData,每次成功之后新建这个对象,这样ios和android都支持了~

 $('#exampleInputFile1').on("change",function() {
            var index;
            index=layer.open({
                    type: 2
                   ,content: '上传中'
                 });
            // 创建
            var form_data = new FormData();
            // 获取文件
            var  file_data = $("#exampleInputFile1").prop("files")[0];//封面
                  form_data.append("file", file_data );
                 console.log(file_data );
            if( file_data!=""){
                $.ajax({
                    type: "POST",
                    url:config.api+"/public/upload",
                    enctype : "multipart/form-data",
                    dataType : "json",
                    processData: false,  // 注意:让jQuery不要处理数据
                    contentType: false,  // 注意:让jQuery不要设置contentType
                    data: form_data,
                }).success(function(msg) {
                    form_data=new FormData ();//新建formdata!!!
                    /*form_data.delete("file");*/
                    $("#exampleInputFile1").val('');//清空input中的file值
                    layer.close(index);
                    $('.InputFile img').show();
                    if($('.img1').attr('src')==""){

                    } else{
                        $('.action1').append('<div class="cropped">' +
                            '<div class="image1  col-xs-3">'+
                            '<img src="'+msg.data+'" class="img1" id="show"/>'+
                            '<div class="delete1">'+"X"+'</div>'+
                            '</div>'+
                            '</div>');
                        $('.add1').remove();
                        $('.InputFile img').hide();
                        $('.InputFile').remove();
                        /* $('#exampleInputFile1').setAttribute('type','text');*/
                        /* $('.action1').append( '<div class="delete1">'+"X"+'</div>');*/
                    }
                    /*图片删除*/
                    $('.delete1').click(function () {
                        $("#exampleInputFile1").val('');
                        /*$(this).siblings().find('.cropped').remove();*/
                        $(this).parent().remove();
                        $(this).parent().parent().remove();
                        $(this).siblings().find('.delete1').remove();
                        $(this).remove();
                        $('.action1').append('<label for="exampleInputFile1" class="col-xs-3 InputFile">' +
                            '<img src="img/signup/add.png" alt=""   class=" add1"/>' +
                            '</label>');
                        /*$('#exampleInputFile1').setAttribute('type','file');*/
                    });
                    console.log(msg);
                }).fail(function(msg) {
                    console.log(msg);
                });
            }

        });

使用的layer移动版,引入layer.js和layer.css即可~

原文地址:https://www.cnblogs.com/zxcc/p/9592840.html