使用WEUI uploader上傳圖片，博主費了很大的勁總算找到完整的了，并且帶后臺接收代碼，有需要的朋友拿去吧，親測可用！

一、html代碼

<link?rel="stylesheet"?href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css"?/>

<div?class="weui_uploader">????<div?class="weui_uploader_hd?weui_cell">????????<div?class="weui_cell_bd?weui_cell_primary">圖片上傳</div>????????<div?class="weui_cell_ft?js_counter">0/6</div>????</div>????<div?class="weui_uploader_bd">????????<ul?class="weui_uploader_files">????????????<!--?預覽圖插入到這?-->?</ul>????????<div?class="weui_uploader_input_wrp">????????????<input?class="weui_uploader_input?js_file"?type="file"?accept="image/jpg,image/jpeg,image/png,image/gif"?multiple=""></div>????</div></div>

二、JS代碼

$(function?()?{????//?允許上傳的圖片類型????var?allowTypes?=?['image/jpg',?'image/jpeg',?'image/png',?'image/gif'];????//?1024KB，也就是?1MB????var?maxSize?=?1024?*?1024;????//?圖片最大寬度????var?maxWidth?=?300;????//?最大上傳圖片數量????var?maxCount?=?6;????$('.js_file').on('change',?function?(event)?{????????var?files?=?event.target.files;????????//?如果沒有選中文件，直接返回????????if?(files.length?===?0)?{????????????return;????????}????????for?(var?i?=?0,?len?=?files.length;?i?<?len;?i++)?{????????????var?file?=?files[i];????????????var?reader?=?new?FileReader();????????????//?如果類型不在允許的類型范圍內????????????if?(allowTypes.indexOf(file.type)?===?-1)?{????????????????$.weui.alert({text:?'該類型不允許上傳'});????????????????continue;????????????}????????????if?(file.size?>?maxSize)?{????????????????$.weui.alert({text:?'圖片太大，不允許上傳'});????????????????continue;????????????}????????????if?($('.weui_uploader_file').length?>=?maxCount)?{????????????????$.weui.alert({text:?'最多只能上傳'?+?maxCount?+?'張圖片'});????????????????return;????????????}????????????reader.onload?=?function?(e)?{????????????????var?img?=?new?Image();????????????????img.onload?=?function?()?{????????????????????//?不要超出最大寬度????????????????????var?w?=?Math.min(maxWidth,?img.width);????????????????????//?高度按比例計算????????????????????var?h?=?img.height?*?(w?/?img.width);????????????????????var?canvas?=?document.createElement('canvas');????????????????????var?ctx?=?canvas.getContext('2d');????????????????????//?設置?canvas?的寬度和高度????????????????????canvas.width?=?w;????????????????????canvas.height?=?h;????????????????????ctx.drawImage(img,?0,?0,?w,?h);????????????????????var?base64?=?canvas.toDataURL('image/png');????????????????????//?插入到預覽區????????????????????var?$preview?=?$('<li?class="weui_uploader_file?weui_uploader_status"?style="background-image:url('?+?base64?+?')"><div?class="weui_uploader_status_content">0%</div></li>');????????????????????$('.weui_uploader_files').append($preview);????????????????????var?num?=?$('.weui_uploader_file').length;????????????????????$('.js_counter').text(num?+?'/'?+?maxCount);????????????????????//?然后假裝在上傳，可以post?base64格式，也可以構造blob對象上傳，也可以用微信JSSDK上傳????????????????????var?progress?=?0;????????????????????function?uploading()?{????????????????????????$preview.find('.weui_uploader_status_content').text(++progress?+?'%');????????????????????????if?(progress?<?100)?{????????????????????????????setTimeout(uploading,?30);????????????????????????}????????????????????????else?{????????????????????????????//?如果是失敗，塞一個失敗圖標????????????????????????????//$preview.find('.weui_uploader_status_content').html('<i?class="weui_icon_warn"></i>');????????????????????????????$preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();????????????????????????}????????????????????}????????????????????setTimeout(uploading,?30);????????????????};????????????????img.src?=?e.target.result;????????????????$.post("/wap/uploader.php",?{?img:?e.target.result},function(res){????????????????????if(res.img!=''){????????????????????????alert('upload?success');????????????????????????$('#showimg').html('<img?src="'?+?res.img?+?'">');????????????????????}else{????????????????????????alert('upload?fail');????????????????????}????????????????},'json');????????????};????????????reader.readAsDataURL(file);????????}????});});

三、PHP代碼

$img?=?isset($_POST['img'])??$_POST['img']?:?'';//?獲取圖片list($type,?$data)?=?explode(',',?$img);//?判斷類型if(strstr($type,'image/jpeg')!=''){????$ext?=?'.jpg';}elseif(strstr($type,'image/gif')!=''){????$ext?=?'.gif';}elseif(strstr($type,'image/png')!=''){????$ext?=?'.png';}//?生成的文件名$photo?=?"../upload/".time().$ext;//?生成文件file_put_contents($photo,?base64_decode($data),?true);//?返回header('content-type:application/json;charset=utf-8');$res?=?array('img'=>$photo);echo?json_encode($res);

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的使用WEUI uploader上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。