zoukankan      html  css  js  c++  java
  • 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即可~

  • 相关阅读:
    Let’s Work on an LLVM Superoptimizer
    菜鸟程序员的成长之路(二)——时间都去哪儿了
    python进阶五_类(二)
    python进阶五_类(一)
    基于asp.net + easyui框架,一步步学习easyui-datagrid——完成,总结(四)
    给师弟师妹的一个计算机专业书单
    python进阶四_模块调用
    python进阶三_函数
    实训第一天--增删改查加hibernate+搭建环境常见问题
    9周的项目实训从今天就开始了,
  • 原文地址:https://www.cnblogs.com/zxcc/p/9592840.html
Copyright © 2011-2022 走看看