PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

　HTML

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

    <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">注意：上传前，先截图[图片小于50KB]</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>

　　上传文件条件设置：

    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;
    }