ホームページ >バックエンド開発 >PHPチュートリアル >thinkphp は更新せずにアバターをダウンロードし、ダイアログ ポップアップ レイヤーのダイアログ ボックス効果と透かし機能を備えています
thinkphp は更新せずにアバターをダウンロードし、ダイアログ ポップアップ レイヤーのダイアログ ボックス効果と透かし機能を備えています
- WBOYオリジナル
- 2016-06-13 13:05:45854ブラウズ
thinkphp は更新せずにアバターをアップロードし、ダイアログ ポップアップ レイヤーのダイアログ ボックス効果を備え、透かし機能を備えています。
は jquery のプラグインを使用します。js をダウンロードしてください。
<頭>
<スクリプト言語="javascript" src="__TEST__/js/jquery-1.7.1.js">
<スクリプト言語="javascript" src="__TEST__/js/ajaxfileupload.js">
// デフォルトのアニメーション速度を上げて効果を誇張します
var $j = jQuery.noConflict();
var old_width='';
$j(function() {
//設定ダイアログポップアップボックス
$j( "#uploader" ).dialog({
autoOpen: false、
dialogClass: "my-dialog",
//
表示: "ブラインド",
//
非表示: "爆発",
幅: 750、
最小幅: 400、
position: [420,185], // ポップアップ時に表示される場所
ドラッグ可能:true
});
//ダイアログを開く
$j( ".up_photo" ).click(function() {
$j( "#uploader" ).dialog( "open" );
false を返す;
});
$j( ".cl_photo" ).click(function() {
$j( "#uploader" ).dialog( "close" );
false を返す;
});
$j( "#next" ).click(function() {
$j.ajaxFileUpload ({
url:'../../Home/photoupload', //文件上传的到这来
secureuri:false,
fileElementId:'pic', //要和input file那个id名字相同
dataType: 'json',
success: function (data, status) {
if(data){
if(data==10101){
alert("您已经上传5张照片了");
window.top.location.reload();
}else{
$j('#up_content').css('display','none');
$j('#ima').css('display','');
$j('.tailor').attr('src',data);
$j('#uploader_step').text("2");
$j('#ima_hidden').attr("value",data);
tail_photo();
$j.post('../../Home/ima_hei',{url_image:data},function (data){
var old_width=data;
$j("#old_width0").attr("value",old_width);
});
}
}
},
error: function (data, status, e){
alert(e);
}
})
});
})
上传一张头像