本文实例在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程序设计有所帮助。