php教程

超轻量级php框架startmvc

PHP+Ajax+JS实现多图上传

更新时间:2020-03-09 03:02:59 作者:startmvc
本文实例在wap站项目中需要做一个ajax多图片上传,结合js插件做了一个,供大家参考,具体

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

PHP Ajax JS 多图上传 图片上传