検索
ホームページphp教程php手册PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

在网上找到了图片上传插件jquery.min.js,但没有上传功能,自己花了10分钟给加上去了哈,如有bug请在素材火网页内留言,一般当天改完上传。
PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br> HTML<br> 首先我们放置一个上传按钮及相关预览信息等。<br> <form>  <br>    <!-- hidden crop params -->  <br>    <input>  <br>    <input>  <br>    <input>  <br>    <input>  <br>    <input>  <br>    <div> <br>     注意:上传前,先截图 <br>    </div>  <br>    <div>  <br>     <img src="/static/imghwm/default1.png" data-src="jquery.js" class="lazy" alt="PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)" >  <br>     <div>  <br>      <ul>  <br>       <li> <label>文件大小</label> <input> </li>  <br>       <li> <label>类型</label> <input> </li>  <br>       <li> <label>图像尺寸</label> <input> </li>  <br>       <li> <label>宽度</label> <input> </li>  <br>       <li> <label>高度</label> <input> </li>  <br>      </ul>  <br>     </div>  <br>     <input>  <br>    </div>  <br> </form> <br> 2、<br> 接着我们引用jQuery库和Jcrop插件。<br> <link> <br> <script></script>  <br> <script></script><br> 3、<br> jQuery<br> 接着我们看下表单的检查:<br> function checkForm() { <br>     if (parseInt($('#w').val())) //若是没有截屏 <br>         return true; <br>     $('.error').html('请先选择图片,并且截图').show(); <br>     return false; <br> }<br> 4、<br> 上传文件条件设置:<br> var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i; <br> if (!rFilter.test(oFile.type)) { <br>     $('.error').html('请选择jpg、jpeg或png格式的图片').show(); <br>     return; <br> } <br>  <br> // check for file size <br> if (oFile.size > 1000 * 1024) { <br>     $('.error').html('请上传小于1M的图片').show(); <br>     return; <br> }查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/71.html

AD:真正免费,域名+虚机+企业邮箱=0元

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター