圖片上傳采用的是 input框的 type=file 的方式進(jìn)行圖片的上傳。下面三種樣式都是 input方式進(jìn)行圖片上傳的。



我們點(diǎn)擊上傳圖片的時(shí)候，圖片上傳到后臺(tái)。首先給大家一個(gè)單張圖片上傳的示例

html:

<div class="z_file1"><input type="file" name="file" id="file_more1" value="" accept="image/jpeg,image/png,image/jpg,image/gif" multiple="" onchange="previewImg(this);"></div> function previewImg(input,imgObj) {var maxsize = 300 * 1024;//超過300k進(jìn)行壓縮//是否支持if (typeof FileReader === 'undefined') {alert("抱歉，你的瀏覽器不支持 FileReader，請(qǐng)使用現(xiàn)代瀏覽器操作！");input.setAttribute('disabled','disabled');}if(input.files && input.files[0]){var file = input.files[0],reader = new FileReader();if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {alert('不是有效的圖片文件!');return;}reader.readAsDataURL(file);reader.onload = function(e){var result=this.result;//獲取到base64的圖片//大于300k圖片進(jìn)行壓縮if(result.length >= maxsize){getId(imgObj).setAttribute('src',result);//回顯圖片getId(imgObj).classList.add('on');//回顯圖片//var img = new Image();//img.src = result; //result是 傳送過來的圖片文件lrz(input.files[0], { width: 200 }) .then(function (rst) { //壓縮后異步上傳 $.ajax({ url : url type: "POST", data : {image:rst.base64,//壓縮后的base值}, dataType:"json", cache:false, async:false, success : function(data) {alert("成功");},error : function(){} }); })}else{getId(imgObj).setAttribute('src',result);getId(imgObj).classList.add('on');var img = new Image();img.src = result;getId(imgObj).setAttribute('src',result);getId(imgObj).classList.add('on');$.ajax({ url :url, type: "POST", data : {image:result//壓縮后的base值}, dataType:"json", cache:false, async:false, success : function(data) {alert("成功");},error : function(){} });}}} }

圖片上傳 利用onchange事件就行圖片上傳，創(chuàng)建FileReader對(duì)象 讀取文件第一個(gè)文件的時(shí)候 new FileReader().readAsDataURL(event.target.files[0])；.讀取完成會(huì)觸發(fā)onload事件 在onload事件里邊繼續(xù)調(diào)用 new
圖片上傳 采用如果圖片過大，就進(jìn)行壓縮上傳。圖片壓縮采用了 使用的圖片壓縮是lrz方式，網(wǎng)上的一個(gè)插件，經(jīng)過嘗試挺好用的。
圖片壓縮需要引入的js：

<!-- 壓縮圖片插件 --><script src="/hljview/page/html/js/lrz.bundle.js"></script><script src="/hljview/page/html/js/lrz.all.bundle.js"></script>

多張圖片上傳

html：

<div class="upload_pic_box"><div class="upload_pic"><div class="photo_box z_photo z_photo1" id="photo_box1"><div class="z_file1"><input type="file" name="file" id="file_more1" value="" accept="image/jpeg,image/png,image/jpg,image/gif" multiple="" onchange="imgChange1(this);"></div> </div><p>上傳圖片第一張將設(shè)置為封面照</p></div></div> /* 多張圖片上傳*/function imgChange(obj) {//獲取點(diǎn)擊的文本框var file = document.getElementById("file_more1");//存放圖片的父級(jí)元素var imgContainer =document.getElementsByClassName('z_photo1')[0];//獲取的圖片文件var fileList = file.files;//文本框的父級(jí)元素var input = document.getElementsByClassName('z_file1')[0];var imgArr = [];//圖片個(gè)數(shù)var pic_num=fileList.length;if(pic_num>6){mask.style.display = "block"text_.innerHTML="您好,圖片不能超過六張";$("body").addClass('common_screen');}else{//遍歷獲取到得圖片文件//var nname="";for (var i = 0; i <pic_num; i++) {var imgUrl = window.URL.createObjectURL(file.files[i]);var imgUrl = window.URL.createObjectURL(file.files[i]); var file_ = file.files[i];var size=file.files[i].size/1024;if(size>20240){alert('請(qǐng)您選擇小于20M的圖片');return false;}//判斷類型是不是圖片 if(!/image\/\w+/.test(file_.type)){ alert("請(qǐng)確保文件為圖像類型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file_); var imageName = "";reader.onload = function(e){ imgDate = this.result; //就是base64 lrz(input.files[0], { width: 200 }) .then(function (rst){})} imgArr.push(imgUrl);var imgAdd = document.createElement("div");imgAdd.setAttribute("class", "photo");imgAdd.setAttribute("imgurls", "'"+imgArr[i]+"'"); //imgurls 設(shè)置屬性//添加 divimgAdd.style.backgroundImage="url("+imgArr[i]+")";imgContainer.insertBefore(imgAdd,input); };}imgRemove();imgnum();var sures = document.getElementsByClassName("sure")[0];cancel.onclick=function(){mask.style.display = "none";$("body").addClass('common_screen');}sure.onclick=function(){mask.style.display = "none";$("body").removeClass('common_screen');}var browser = {versions: function () {var u = navigator.userAgent, app = navigator.appVersion;return {//移動(dòng)終端瀏覽器版本信息trident: u.indexOf('Trident') > -1, //IE內(nèi)核presto: u.indexOf('Presto') > -1, //opera內(nèi)核webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否為移動(dòng)終端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否為iPhone或者QQHD瀏覽器iPad: u.indexOf('iPad') > -1, //是否iPadwebApp: u.indexOf('Safari') == -1 //是否web應(yīng)該程序，沒有頭部與底部};} (),language: (navigator.browserLanguage || navigator.language).toLowerCase()}//如果是androidif (browser.versions.android) {imgnum();}}; //限制上傳張數(shù)var z_file = document.getElementsByClassName("z_file")[0];function imgnum(){var imgList1 = $('#photo_box .photo'); imgList1.each(function(){var index=$(this).index();if(index==5){z_file.style.display="none";return;}if(index>5){$(this).remove();}if(index<5){z_file.style.display="block";}})}

圖片多張上傳特點(diǎn)：先將所有圖片進(jìn)行加載，最后才逐個(gè)進(jìn)行加載，圖片都加載完成后才執(zhí)行 reader.onload 事件。

總結(jié)

以上是生活随笔為你收集整理的h5页面图片上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。