JS form表单图片上传

JS form表单图片上传 - LiuYier

zsongs 2021-11-01 原文

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 }