头像

PHP+html5实现图片选取裁剪上传

来源:https://www.daimasucai.com/upload/135.html 代码素材管理员 2017-03-10浏览()

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

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

PHP+html5实现图片选取裁剪上传
分类:首页>>PHP/Mysql>>上传 阅读次数:
查看演示 下载次数: 53

手机扫码访问:

下载资源 下载积分: 50

  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;

}


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/upload/135.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>