php+html5兼容手机端的图片选取裁剪上传怎么实现(html5,php,开发技术)

首先放置一个上传按钮及相关预览信息等

<formid="upload_form"enctype="multipart/form-data"method="post"action="upload.php"onsubmit="returncheckForm()"><!--hiddencropparams--><inputtype="hidden"id="x1"name="x1"autocomplete="off"/><inputtype="hidden"id="y1"name="y1"autocomplete="off"/><inputtype="hidden"id="x2"name="x2"autocomplete="off"/><inputtype="hidden"id="y2"name="y2"autocomplete="off"/><inputtype="file"name="image_file"id="image_file"onchange="fileSelectHandler()"/><divclass="error">注意：上传前，先截图</div><divclass="step2"><imgid="preview"/><divclass="info"><ul><li><label>文件大小</label><inputtype="text"id="filesize"name="filesize"class="input"autocomplete="off"/></li><li><label>类型</label><inputtype="text"id="filetype"name="filetype"class="input"autocomplete="off"/></li><li><label>图像尺寸</label><inputtype="text"id="filedim"name="filedim"class="input"autocomplete="off"/></li><li><label>宽度</label><inputtype="text"id="w"name="w"class="input"autocomplete="off"/></li><li><label>高度</label><inputtype="text"id="h"name="h"class="input"autocomplete="off"/></li></ul></div><inputtype="submit"value="上传"class="btn"/></div></form>

接着引用js和css样式

<linkhref="css/jquery.Jcrop.min.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="jquery.js"></script><scriptsrc="js/jquery.Jcrop.min.js"></script>

接着看下表单的检查

functioncheckForm(){if(parseInt($('#w').val()))//若是没有截屏returntrue;$('.error').html('请先选择图片，并且截图').show();returnfalse;}

上传文件条件设置

varrFilter=/^(image\/jpeg|image\/png|image\/jpg)$/i;if(!rFilter.test(oFile.type)){$('.error').html('请选择jpg、jpeg或png格式的图片').show();return;}//checkforfilesizeif(oFile.size>1000*1024){$('.error').html('请上传小于1M的图片').show();return;}