PHP+Ajax+JS實(shí)現(xiàn)多圖上傳
本文實(shí)例在wap站項(xiàng)目中需要做一個(gè)ajax多圖片上傳,結(jié)合js插件做了一個(gè),供大家參考,具體內(nèi)容如下
/* ajax 上傳圖片 */ var num = 0; // 點(diǎn)擊刪除圖片 function onDelete(num){ if($("#"+num).attr('src')!="__PUBLIC__/Home/images/jiazai.gif" && $("#"+num).attr('src')!=""){ if(confirm("確認(rèn)刪除嗎")){ $("#a"+num).remove(); }else{ // } } } $(function(){ $("#file0").bind("change",function(){ clickUpload(num); }); function clickUpload(num){ var imgObject = document.getElementById('file0'); // 文件對(duì)象 $("#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); // 本地路徑 // 實(shí)例化image對(duì)象 var pos = getImageSrc.lastIndexOf("."); var lastname = getImageSrc.substring(pos, getImageSrc.length) // 圖片后綴 if(lastname!=".jpg" && lastname!=".png" && lastname!=".jpeg" && lastname!='.gif'){ $("#a"+num).remove(); alert("請(qǐng)選擇一張圖片"); }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', //用于文件上傳的服務(wù)器端請(qǐng)求地址 secureuri: false, //是否需要安全協(xié)議,一般設(shè)置為false fileElementId: 'file0', //文件上傳域的ID dataType: 'json', //返回值類型 一般設(shè)置為json success: function (data) //服務(wù)器成功響應(yīng)處理函數(shù) { 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)//服務(wù)器響應(yīng)失敗處理函數(shù) { alert(e); } } ) } });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)php程序設(shè)計(jì)有所幫助。
相關(guān)文章
SQL+HTML+PHP?一個(gè)簡(jiǎn)單論壇網(wǎng)站的綜合開(kāi)發(fā)案例(注冊(cè)、登錄、注銷、修改信息、留言等)
這篇文章主要介紹了SQL+HTML+PHP?一個(gè)簡(jiǎn)單論壇網(wǎng)站的綜合開(kāi)發(fā)案例(注冊(cè)、登錄、注銷、修改信息、留言等),需要的朋友可以參考下2022-12-12Laravel5.5 手動(dòng)分頁(yè)和自定義分頁(yè)樣式的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇Laravel5.5 手動(dòng)分頁(yè)和自定義分頁(yè)樣式的簡(jiǎn)單實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10Laravel如何使用數(shù)據(jù)庫(kù)事務(wù)及捕獲事務(wù)失敗后的異常詳解
最近在學(xué)習(xí)Laravel,在學(xué)習(xí)中遇到了不少的問(wèn)題,所以想著總結(jié)記錄下來(lái),所以下面這篇文章主要給大家介紹了關(guān)于Laravel如何使用數(shù)據(jù)庫(kù)事務(wù)及捕獲事務(wù)失敗后異常的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-10-10PHP cURL初始化和執(zhí)行方法入門(mén)級(jí)代碼
這篇文章主要介紹了PHP cURL初始化和執(zhí)行方法入門(mén)級(jí)代碼,本文直接給出代碼示例,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-05-05