JS form表单图片上传

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' onchange='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' onchange='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 }