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即可~