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

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

WBOY

リリース： 2016-07-13 10:28:48

オリジナル

1216 人が閲覧しました

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

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文件代码如下

复制代価代価如下: