1 // 点击file 类型的input 触发的方法 2 3 function changesProvider(){ 4 5 // fileProvider -> input中的name属性值 6 7 var f = document.getElementByName("fileProvider")[0].files; 8 9 // 图片大小判断 10 11 if( f[0].size. > 1024*3*1024 ){ 12 13 // 清空form表单中的结构 14 15 $("#formBoxProvider").children.remove(); 16 17 // 把原先得结构重新动态添加进去 18 19 $("#formBoxProvider").append( "<label for='uploadProvider' class='label_bg'></label><input id='uploadProvider' οnchange='changesProvider()' name='fileProvider' type='file' accept='.jpg, .jpeg, .png'>" ); 20 21 message({ 22 23 type: "error", 24 25 message: "图片文件不能大于3M" 26 27 }) 28 29 return false; 30 31 } 32 33 //先new一个formData对象 34 35 var formData = new FormData( $("#formBoxProvider")[0] ); 36 37 //ajax交互 38 39 $.ajax({ 40 41 type: 'POST', 42 43 url: '${pageContext.request.contextPath}' + 'serve/provider/image/upload.shtml', 44 45 data: formData, 46 47 contentType: false, 48 49 processData: false, 50 51 success: function (data) { 52 53 if( data.errno == 1 ){ 54 55 // 成功必须再次清空form表单中的DOM结构 56 57 // 清空form表单中的结构 58 59 $("#formBoxProvider").children.remove(); 60 61 // 把原先得结构重新动态添加进去 62 63 $("#formBoxProvider").append( "<label for='uploadProvider' class='label_bg'></label><input id='uploadProvider' οnchange='changesProvider()' name='fileProvider' type='file' accept='.jpg, .jpeg, .png'>" ); 64 65 var imagePath = imageUrl + data.data; 66 67 //盒子中具体图片元素 68 var imageItem = "<div class='item-box'><span class='detele_sign'><img class='pImage' src='" + imagePath + "'></span></div>"; 69 #("upload-sign").before(imageItem); 70 $(".detele_sign").on("click", function(){ 71 72 $(this).parents('.item-box').remove(); 73 74 if($('.item-box').length < 7 ){ 75 76 $("#upload-sign").show(); 77 } 78 79 }); 80 81 if($('.item-box').length == 7){ 82 83 $("#upload-sign").hide(); 84 } 85 }, //success end 86 error: function(data){ 87 88 } 89 }) //ajax end 90 91 92 93 }