溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

移動(dòng)端web無刷新上傳圖片【兼容安卓IOS】

發(fā)布時(shí)間：2020-06-20 07:22:21 來源：網(wǎng)絡(luò) 閱讀：17674 作者：AndyMac 欄目：移動(dòng)開發(fā)

博客已轉(zhuǎn)移到：PHP博客

需求手機(jī)端網(wǎng)頁或者微信無刷新上傳頭像
環(huán)境手機(jī)瀏覽器或者微信瀏覽器(支持HTML5)
實(shí)現(xiàn)方式LocalResizeIMG
地址

https://github.com/think2011/LocalResizeIMG(原版地址)

鏈接: http://pan.baidu.com/s/1ntNYXrb 密碼: 71cp(個(gè)人修改版)

說明原版只能指定固定的圖片寬度，而修改版擴(kuò)展原圖片上傳
使用方式
<h2 class="text-center">LocalResizeIMG-本地壓縮 1.0</h2>
    <hr/>
    <input type="file" />
    <hr/>

	<!-- javascript
		================================================== -->
	<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js" type="text/javascript"></script>
	<script src="localResizeIMG.js" type="text/javascript"></script>
	
    <!-- mobileBUGFix.js 兼容修復(fù)移動(dòng)設(shè)備 -->
	<script src="patch/mobileBUGFix.mini.js" type="text/javascript"></script>
	<script type="text/javascript">
        $('input:file').localResizeIMG({
             width: 100,
             quality: 0.1,
             success: function (result) {
             var img = new Image();
             img.src = result.base64;

             $('body').append(img);
             console.log(result);
             }
         });
	</script>


簡單說明:width是生成的圖片的寬度，個(gè)人修改里，如果指定width為1，則為原圖寬度

         quality是圖片的質(zhì)量

         success:生成成功以后是base64碼，在success里可以用ajax發(fā)送到服務(wù)器端保存，base64會(huì)生成兩種：一種是帶前綴說明圖片類型的base64碼，可以直接放到img標(biāo)簽里使用，調(diào)用方法：result.base64   還有一種是result.clearBase64，不帶說明的，讀取方法:result.clearBase64。

服務(wù)器端代碼:

$path='./Uploads/'.date('Ymd').'/';
		if(!file_exists($path)){
			mkdir($path);
		}
		$file=$path.time().'.jpeg';
		$base64=base64_decode($_POST['head']);
		file_put_contents($file, $base64)


       

     其他說明：安卓下有些可以調(diào)用相冊(cè)，文件管理器和攝像頭，有些只能調(diào)用相冊(cè)和文件管理器

               IOS可調(diào)用相冊(cè)和攝像頭。

               PC端無限制

               無論上傳什么圖片，最后都會(huì)變成jpeg的格式。


     歡迎加群： 252799167     感謝@南寧-柿子

移動(dòng)端web無刷新上傳圖片【兼容安卓IOS】

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手