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

 }