PHP+ajaxfileupload+jcrop プラグインはアバターのアップロードとクロッピングを完全に実現します_PHP チュートリアル

WBOY
リリース: 2016-07-13 10:28:48
オリジナル
1252 人が閲覧しました


昨日、アバター プラグインを統合するために時間を費やしました。まずはその効果を見てみましょう。

PHP+ajaxfileupload+jcrop プラグインはアバターのアップロードとクロッピングを完全に実現します_PHP チュートリアル

1. まず、ajaxfileupload プラグインを使用して非同期アップロードを実行します。当初はここでアップロードの進行状況のエフェクトを作成したかったのですが、技術に限界があったため失敗しました。アップロードボタンのファイルサイズ制限も設定しましたが、ブラウザの互換性の問題により完璧ではなく、IE6~IE9間で解決すべき問題がまだたくさんあります

getFileSize関数はファイルサイズを決定するために使用される関数です

コードをコピーします コードは次のとおりです:
function getFileSize(fileName) {

$("#" + fileName)[0].files) {
var byteSizeサイズ判断のロジックは次のとおりです。デバイスの互換性の問題により完了していません
サイズ;//KB
}



2. ボタンアップロードイベントバインディング



コードをコピーします

コードは次のとおりです:


$("#btnUpload").click(function () {
varallowImgageType = ['jpg', 'jpeg', 'png', 'gif'];
var file = $("#file1"). val(); if (byteSize > 2048) { 添付ファイルは 2M を超えることはできません"); //インターセプトポイント以降の文字列
var ext = file.substring(pos + 1).toLowerCase (); // /console.log (Ext) ;
IF ($.Inarray (EXT,AllowImgageType)! = -1) {
ajaxFileupload (); , GIF タイプ画像 ");
}}}
else {
alert (" を選択してくださいJPG、JPEG、PNG、GIF タイプの画像 ");
3. アップロードが成功したら、画像のパスを返し、画像のトリミングを初期化します。画像のトリミングには、ajax を使用して php にリクエストするだけです




コードをコピーします

コードは次のとおりです:

function ajaxFileUpload() {
                $.ajaxFileUpload({
                    url: 'action.php', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性 
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        //var json = eval('(' + data + ')');
                        //alert(data);
                        $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height});
                        $('#imgsrc').val(data.path);
                        //alert(data.msg);

//メイン画像のコンテナID:コンテナID、幅:収縮図のサイズ
パービュー:[{id:picture_200 "、幅:200、高さ:200}、{id:piction_50" , width: 50, height: 50}, {{ ID: "picture_30", width: 30, height: 30}],
// セレクターのデフォルト サイズ
selector: {width: 200, height: 200},
showCoords: function(c){// x座標とyの座標幅とy座標幅と高さの左上隅の幅
C.y);
").val(c.w);)
return false;
}

$('#btnCrop').click(function() {
$.getJSON('action2.php', {x: $('#x1').val ()、y : $('#y1').val()、w: $('#cw').val()、h: $('#ch').val()、src: $('#imgsrc') .val()}, function(data) {
alert(data.msg);
});
return false;
});

4.HTML文件代码如下

复制代価代価如下:






非常に粗雑な機能では、完璧に必要な箇所が非常に多くあります。

附上ソースコード http://www.jb51.net/codes/174384.html

http://www.bkjia.com/PHPjc/781038.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/781038.html技術記事昨日の天花完了時点では、次の画像ファイルを統合しました、西側の成果を先に見てください。 1.先に使用してajaxfileuploadファイルを上に転送します。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート