本文实例在wap站项目中需要做一个ajax多图片上传,结合js插件做了一个,供大家参考,具体内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
/* ajax 上传图片 */ var num = 0; // 点击删除图片 function onDelete(num){ if ($( "#" +num).attr( 'src' )!= "__PUBLIC__/Home/images/jiazai.gif" && $( "#" +num).attr( 'src' )!= "" ){ if (confirm( "确认删除吗" )){ $( "#a" +num).remove(); } else { // } } } $( function (){ $( "#file0" ).bind( "change" , function (){ clickUpload(num); }); function clickUpload(num){ var imgObject = document.getElementById( 'file0' ); // 文件对象 $( "#yulan" ).append( "<a id='a" +num+ "' onclick='onDelete(" +num+ ")' href='javascript:;'> <img id='" +num+ "' width='75' height='75' src='__PUBLIC__/Home/images/jiazai.gif'/></a>" ); // $("#yulan").append("<li id='a"+num+"' ><img id='"+num+"' src='__PUBLIC__/Home/images/jiazai.gif' /><a href='javascript:;' onclick='onDelete("+num+")'>删除</a></li>"); var getImageSrc = getFullPath(imgObject); // 本地路径 // 实例化image对象 var pos = getImageSrc.lastIndexOf( "." ); var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀 if (lastname!= ".jpg" && lastname!= ".png" && lastname!= ".jpeg" && lastname!= '.gif' ){ $( "#a" +num).remove(); alert( "请选择一张图片" ); } else { ajaxFileUpload(num); $( "#file0" ).unbind( "change" ).bind( "change" , function (){ clickUpload(num); }); } num++; } function getFullPath(obj) { //得到图片的完整路径 if (obj) { if (window.navigator.userAgent.indexOf( "MSIE" ) >= 1) { obj.select(); return document.selection.createRange().text; } else if (window.navigator.userAgent.indexOf( "Firefox" ) >= 1) { if (obj.files) { return obj.files.item(0).getAsDataURL(); } return obj.value; } return obj.value; } } function ajaxFileUpload(num) { $.ajaxFileUpload ( { url: 'http://xxxx/updateImg' , //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: 'file0' , //文件上传域的ID dataType: 'json' , //返回值类型 一般设置为json success: function (data) //服务器成功响应处理函数 { var jsonText = data; console.log(jsonText); if (jsonText[ 'status' ]==1){ if (jsonText[ 'info' ]!= "" ){ console.log(jsonText[ 'info' ]); $( "#" +num).attr( "src" , "__PUBLIC__//Admin/Upload/" +jsonText[ 'info' ]); var images = $( "#img" ).val(); if (images!= "" ){ $( "#img" ).val(images+ "," +jsonText[ 'info' ]); } else { $( "#img" ).val(images+ "" +jsonText[ 'info' ]); } } } else { $( "#a" +num).remove(); // alert("图片上传失败"); } }, error: function (data,e) //服务器响应失败处理函数 { alert(e); } } ) } }); |
以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。