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



}