《PHP實(shí)戰(zhàn):PHP仿微信多圖片預(yù)覽上傳實(shí)例代碼》要點(diǎn):
本文介紹了PHP實(shí)戰(zhàn):PHP仿微信多圖片預(yù)覽上傳實(shí)例代碼,希望對(duì)您有用。如果有疑問,可以聯(lián)系我們。
PHP學(xué)習(xí)生產(chǎn)圖片區(qū)域,上傳按鈕#btn可替換自己想要的圖片
PHP學(xué)習(xí)
<ul id="ul_pics" class="ul_pics clearfix">
<li><img src="logo.png" id="btn" class="img_common" /></li>
</ul>
PHP學(xué)習(xí)plupload上傳
PHP學(xué)習(xí) var uploader = new plupload.Uploader({//創(chuàng)建實(shí)例的構(gòu)造方法 runtimes: 'html5,flash,silverlight,html4', //上傳插件初始化選用那種方式的優(yōu)先級(jí)順序 browse_button: 'btn', // 上傳按鈕 url: "ajax.php", //遠(yuǎn)程上傳地址 flash_swf_url: 'plupload/Moxie.swf', //flash文件地址 silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址 filters: { max_file_size: '10mb', //最大上傳文件大小(格式100b, 10kb, 10mb, 1gb) mime_types: [//允許文件上傳類型 {title: "files", extensions: "jpg,png,gif,jpeg"} ] }, multi_selection: true, //true:ctrl多文件上傳, false 單文件上傳 init: { FilesAdded: function(up, files) { //文件上傳前 if ($("#ul_pics").children("li").length > 30) { alert("您上傳的圖片太多了!"); uploader.destroy(); } else { var li = ''; plupload.each(files, function(file) { //遍歷文件 li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>"; }); $("#ul_pics").prepend(li); uploader.start(); } }, UploadProgress: function(up, file) { //上傳中,顯示進(jìn)度條 var percent = file.percent; $("#" + file.id).find('.bar').css({"width": percent + "%"}); $("#" + file.id).find(".percent").text(percent + "%"); }, FileUploaded: function(up, file, info) { //文件上傳成功的時(shí)候觸發(fā) var data = eval("(" + info.response + ")");//解析返回的json數(shù)據(jù) $("#" + file.id).html("<input type='hidden'name='pic[]' value='" + data.pic + "'/><input type='hidden'name='pic_name[]' value='" + data.name + "'/><img class='img_common' onclick=delPic('" + data.pic + "','" + file.id + "') src='" + data.pic + "'/>");//追加圖片 }, Error: function(up, err) { //上傳出錯(cuò)的時(shí)候觸發(fā) alert(err.message); } } }); uploader.init();
PHP學(xué)習(xí)ajax刪除上傳的圖片
PHP學(xué)習(xí)
function delPic(pic, file_id) { //刪除圖片 參數(shù)1圖片路徑 參數(shù)2 隨機(jī)數(shù)
if (confirm("確定要?jiǎng)h除嗎?")) {
$.post("del.php", {pic: pic}, function(data) {
$("#" + file_id).remove()
})
}
}
轉(zhuǎn)載請(qǐng)注明本頁網(wǎng)址:
http://www.fzlkiss.com/jiaocheng/3816.html