php+html5相容手機端的圖片選取裁剪上傳例項
網上大多圖片上傳外掛都不帶裁剪功能,這個是php+html5實現的相容手機端的圖片選取裁剪上傳例項,分享出來希望能幫到大家。
首先放置一個上傳按鈕及相關預覽資訊等
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()"> <!-- hidden crop params --> <input type="hidden" id="x1" name="x1" autocomplete="off" /> <input type="hidden" id="y1" name="y1" autocomplete="off" /> <input type="hidden" id="x2" name="x2" autocomplete="off" /> <input type="hidden" id="y2" name="y2" autocomplete="off" /> <input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /> <div class="error"> 注意:上傳前,先截圖 </div> <div class="step2"> <img id="preview" /> <div class="info"> <ul> <li><label>檔案大小</label> <input type="text" id="filesize" name="filesize" class="input" autocomplete="off" /></li> <li><label>型別</label> <input type="text" id="filetype" name="filetype" class="input" autocomplete="off" /></li> <li><label>影像尺寸</label> <input type="text" id="filedim" name="filedim" class="input" autocomplete="off" /></li> <li><label>寬度</label> <input type="text" id="w" name="w" class="input" autocomplete="off" /></li> <li><label>高度</label> <input type="text" id="h" name="h" class="input" autocomplete="off" /></li> </ul> </div> <input type="submit" value="上傳" class="btn" /> </div> </form>
接著引用js和css樣式
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script src="js/jquery.Jcrop.min.js"></script>
接著看下錶單的檢查
function checkForm() { if (parseInt($('#w').val())) //若是沒有截圖 return true; $('.error').html('請先選擇圖片,並且截圖').show(); return false; }
上傳檔案條件設定
var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i; if (!rFilter.test(oFile.type)) { $('.error').html('請選擇jpg、jpeg或png格式的圖片').show(); return; } // check for file size if (oFile.size > 1000 * 1024) { $('.error').html('請上傳小於1M的圖片').show(); return; }
本文轉自:
轉載請註明出處!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31545264/viewspace-2679527/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Vue圖片裁剪上傳元件Vue元件
- 圖片裁剪上傳示例(node + react)React
- js獲取上傳圖片尺寸和格式程式碼例項JS
- 求一個手機多選上傳圖片的好外掛
- html5手機上傳圖片HTML
- 上傳圖片本地預覽例項程式碼
- 圖片上傳預覽效果程式碼例項
- 基於cropper.js的圖片上傳和裁剪JS
- Web端裁剪圖片方法Web
- Java 圖片裁剪,擷取Java
- Laravel- 圖片上傳新增自動裁剪功能Laravel
- 圖片裁剪並上傳到阿里雲oss阿里
- javascript檢測上傳圖片大小程式碼例項JavaScript
- php單張圖片上傳外掛免重新整理,相容手機,可實現類似微信圖片上傳的體驗PHP
- 小程式踩坑記錄-上傳圖片及canvas裁剪圖片後上傳至伺服器Canvas伺服器
- jQuery限制上傳圖片格式和大小程式碼例項jQuery
- web技術分享| 圖片上傳與圖片裁剪結合 vue3WebVue
- 如何使用FormData上傳壓縮裁剪後的圖片Blob物件ORM物件
- 服務端有辦法知道上傳上來的圖片是透過手機拍攝還是選擇照片上傳的嗎服務端
- 1小時搞定cropper.js製作頭像/圖片上傳、裁剪、併傳送至後端JS後端
- html5拖動上傳圖片效果程式碼例項HTML
- input file利用FileReader實現圖片上傳程式碼例項
- 直播平臺搭建,Android手機拍照和手機相簿選取圖片的工具Android
- Android 拍照、選擇圖片並裁剪Android
- 移動端圖片上傳元件分享元件
- 圖片大小自適應手機螢幕程式碼例項
- jcrop+Fileapi圖片上傳裁剪外掛使用簡單介紹API
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- js驗證上傳圖片副檔名型別程式碼例項JS型別
- ios裁剪圖片iOS
- (H5)canvas實現裁剪圖片和馬賽克功能,以及又拍雲上傳圖片H5Canvas
- jQuery選項卡切換圖片效果程式碼例項jQuery
- 獲取img圖片原始尺寸程式碼例項
- android選擇圖片或拍照圖片上傳到伺服器(包括上傳引數)Android伺服器
- 隨機漂浮圖片廣告例項程式碼隨機
- 微信小程式開發之從相簿獲取圖片 使用相機拍照 本地圖片上傳微信小程式地圖
- Retrofit+RxJava上傳圖片上傳圖片到後臺RxJava
- angular上傳圖片到.netcore後端AngularNetCore後端