本文实例在wap站项目中需要做一个ajax多图片上传,结合js插件做了一个,供大家参考,具体内容如下
/* 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程序设计有所帮助。
本文地址:https://www.stayed.cn/item/22647
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我