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" class="lazy" data-src="jquery.js"></script>  <script class="lazy" data-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; }

“php+html5兼容手机端的图片选取裁剪上传怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！