JS form表单图片上传

 // 点击file 类型的input 触发的方法

 function changesProvider(){

   // fileProvider -> input中的name属性值 

   var f = document.getElementByName("fileProvider")[0].files;

   // 图片大小判断

   if( f[0].size. > 1024*3*1024 ){

        // 清空form表单中的结构

     $("#formBoxProvider").children.remove();

     // 把原先得结构重新动态添加进去

     $("#formBoxProvider").append( "<label for='uploadProvider' class='label_bg'></label><input id='uploadProvider' onchange='changesProvider()' name='fileProvider' type='file' accept='.jpg, .jpeg, .png'>" );

     message({

       type: "error",

       message: "图片文件不能大于3M"

     })

     return false;

   }

      //先new一个formData对象

   var formData = new FormData( $("#formBoxProvider")[0] );

   //ajax交互

    $.ajax({

     type: 'POST',

     url: '${pageContext.request.contextPath}' + 'serve/provider/image/upload.shtml',

     data: formData,

     contentType: false,

     processData: false,

     success: function (data) {

       if( data.errno == 1 ){

         // 成功必须再次清空form表单中的DOM结构

          // 清空form表单中的结构

         $("#formBoxProvider").children.remove();

         // 把原先得结构重新动态添加进去

         $("#formBoxProvider").append( "<label for='uploadProvider' class='label_bg'></label><input id='uploadProvider' onchange='changesProvider()' name='fileProvider' type='file' accept='.jpg, .jpeg, .png'>" );

         var imagePath = imageUrl + data.data;

         //盒子中具体图片元素
        var imageItem = "<div class='item-box'><span class='detele_sign'><img class='pImage' src='" + imagePath + "'></span></div>";
        #("upload-sign").before(imageItem);
        $(".detele_sign").on("click", function(){          $(this).parents('.item-box').remove();            if($('.item-box').length < 7 ){             $("#upload-sign").show();
          }         });         if($('.item-box').length == 7){           $("#upload-sign").hide();
        }  
    }, //success end
    error: function(data){     }
  }) //ajax end }
上一篇:微服务框架 ketchup 介绍


下一篇:.NET Core Community 第四个千星项目诞生:微服务框架 Surging