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 }